Me pregunto cuál es la mejor manera de poner espacios entre estas 3 imágenes con CSS usando Bootstrap 3 RC2, ya que lo que he hecho en este momento no es el cambio de tamaño automático de las imágenes, aunque he establecido el ancho en automático en mi#picture etiqueta de identificación Deseo que estén en línea y redimensionen las imágenes en consecuencia.

Aquí está mi marca:

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
    </div>
</div>

CSS:

.container {
    max-width:1000px;
    background-color:white;
}
body {
    background-color:cyan
}
#picture {
    width:auto;
    /*margin-left:10px; */
    /*margin-right:10px; */
}
.col-lg-4 {
    margin-left:10px;
    margin-right:10px;
}

Revisa miViolín para una visión más clara. ¿Hay una mejor manera de manejar esto?