Wie platziere ich diese Bilder in einem Bootstrap 3-Grid-System?

Ich frage mich, welcher der beste Weg ist, um Räume zwischen diesen 3 Bildern mit CSS unter Verwendung von Bootstrap 3 RC2 als das, was ich im Moment getan habe, nicht automatisch die Größe der Bilder zu ändern, obwohl ich die Breite auf automatisch eingestellt habe mein #picture ID-Tag. Ich wünsche ihnen, dass sie inline sind und die Bilder entsprechend skalieren.Wie platziere ich diese Bilder in einem Bootstrap 3-Grid-System?

Hier ist mein 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; 
}

Überprüfen Sie mein Fiddle für eine klarere Sicht. Gibt es einen besseren Weg, damit umzugehen?

Quelle

2013-08-18 ProEvilz

offtopic: Änderung id = "Bild" zu class = "Bild" ... können Sie bestimmte ID verwenden, nur einmal, Klasse mehr wird times..it nicht Ihr Problem lösen, aber es wird Mach dein Beispiel valider –

Entfernen Sie Ihr eigenes CSS für .col-lg-4: diese Ränder können das Bootstrap CSS vermasseln. Außerdem sind diese Spalten nur sichtbar, wenn Ihre Bildschirmbreite größer als 1200 px ist.

Fügen Sie die folgenden Klassen auf Ihre divs: .col-xs-4.col-sm-4 und .col-md-4 und geben Bilder ein class="img-responsive" Attribut.

Es sollte jetzt funktionieren, wie Sie es wünschen.

Quelle

2013-08-19 01:12:06

Wenn ich Ihre Frage richtig verstehe, möchten Sie diese Bilder in einer horizontalen Linie zeigen, mit einem gewissen Abstand zwischen den Bildern?

allererst die DIV ist in Zeile erhalten die folgende

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

Versuch ändern, um eine Breite für die Behälter und Zeile (zum Beispiel 100%) und dann divs Halten der Bilder angeben. Hoffe das hilft dir aus?

Quelle

2013-08-19 00:18:19

Ich habe dein CSS hinzugefügt. Habe nichts geändert. Außerdem habe ich die maxwidth: 1000px des Containers auf nur Breite: 1000px geändert. Die Reihe ist flüssig, also ist es 1000px, um der Behältergröße zu entsprechen. Auch die Breite des Col-lg-4 ist voreingestellt durch bootstrap CSS auf 33.3px Also .. noch mehr Vorschlag? – ProEvilz

Wie Harm Wellink erwähnt, entfernen Sie Ihre CSS. Sie sollten nur den folgenden HTML-Code benötigen. Beachten Sie die Klassen "col-xs-4" und "img-responsive". Sie brauchen nicht col-sm-4, col-md-4, col-lg-4, wenn Sie die 3 Spalten auf allen Bildschirmgrößen haben wollen.

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

Quelle

2014-01-19 19:30:59 sevmusic

Wie platziere ich diese Bilder in einem Bootstrap 3-Grid-System?

Antwort

Verwandte Themen