Come spazio queste immagini all'interno di un sistema di griglia Bootstrap 3?

Question

Mi chiedo quale sia il modo migliore per mettere gli spazi tra queste 3 immagini con CSS usando Bootstrap 3 RC2 come quello che ho fatto al momento non è ridimensionare automaticamente le immagini, anche se ho impostato la larghezza in automatico il mio tag ID #picture. Vorrei che fossero in linea e ridimensionate le immagini di conseguenza.

Ecco il mio markup:

<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; 
} 

leggi la mia Fiddle per una visione più chiara. C'è un modo migliore per gestire questo problema?

Answer 1

Rimuovere il proprio CSS per .col-lg-4: questi margini possono rovinare il CSS Bootstrap. Accanto a ciò, queste colonne sono visibili solo quando la larghezza dello schermo è maggiore di 1200 px.

Aggiungere le seguenti classi per i tuoi div: .col-xs-4.col-sm-4 e .col-md-4, e dare le immagini di un attributo class="img-responsive".

Dovrebbe funzionare ora come desideri.

Answer 2

Se ho capito bene la tua domanda, ti piacerebbe mostrare queste immagini in una linea orizzontale, con una certa quantità di spazio tra le immagini?

Prima di tutto per ottenere i DIV, in linea cambiare le seguenti

.col-lg-4 { 
    display: inline-block; 
} 

tenta di specificare una larghezza per il vostro contenitore e riga (per esempio 100%) e poi i tuoi div tenendo le immagini. Spero che questo ti aiuti?

Answer 3

Come menzionato Harm Wellink, rimuovi il tuo css. Dovresti solo avere il seguente html. Nota la "col-xs-4" e la classe "img-responsive". Non hai bisogno di col-sm-4, col-md-4, col-lg-4 se hai intenzione di avere le 3 colonne su tutte le dimensioni dello schermo.

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" /> 
    </div> 
</div>