Jak rozmieścić te obrazy w systemie siatki Bootstrap 3?

Question

Zastanawiam się, jaki jest najlepszy sposób wstawiania spacji między tymi 3 obrazami za pomocą CSS przy użyciu Bootstrap 3 RC2, ponieważ to, co zrobiłem w tej chwili, nie powoduje automatycznej zmiany rozmiaru obrazów, mimo że ustawiłem szerokość na auto w mój znacznik id #picture. Życzę im, aby odpowiednio dopasowali i dostosowali rozmiar obrazów.

Tu jest mój znaczników:

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

sprawdź mój Fiddle dla wyraźniejszego widzenia. Czy istnieje lepszy sposób na radzenie sobie z tym?

Answer 1

Usunięcie własnego kodu CSS dla .col-lg-4: te marginesy mogą zepsuć kod CSS Bootstrap. Poza tym te kolumny są widoczne tylko wtedy, gdy szerokość ekranu jest większa niż 1200 pikseli.

Dodaj następujące klasy do div: .col-xs-4.col-sm-4 i .col-md-4 i dać obrazom atrybut class="img-responsive".

Powinno działać tak, jak chcesz.

Answer 2

Jeśli dobrze rozumiem twoje pytanie, chciałbyś pokazać te zdjęcia w poziomej linii, z pewną ilością wolnego miejsca pomiędzy zdjęciami?

Przede wszystkim, aby div w wierszu zmienić następujące

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

spróbować określić szerokość do pojemnika i rzędzie (na przykład 100%), a następnie Twoje div gospodarstwa zdjęcia. Mam nadzieję, że to ci pomoże?

Answer 3

Jak wspomina Harm Wellink, usuń swoje css. Powinieneś tylko potrzebować następującego html. Zwróć uwagę na klasę "col-xs-4" i "img-responsive". Nie potrzebujesz col-sm-4, col-md-4, col-lg-4, jeśli chcesz mieć 3 kolumny na wszystkich rozmiarach ekranu.

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