Wie kann ich Raum dieser Bilder in einer Bootstrap 3 grid-system?

Frage ich mich, was ist der beste Weg, um die Zwischenräume zwischen diesen 3 Bildern mit CSS mit Bootstrap 3 RC2 als das, was ich getan habe ist im moment keine auto-Größenänderung der Bilder, auch wenn ich stellen Sie die Breite auf " auto in meiner #picture id-tag. Ich möchte für Sie zu b inline-und die Größe der Bilder entsprechend.

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

Check my Fiddle für eine klarere Sicht. Gibt es einen besseren Weg zu gehen, über den Umgang mit dieser?

offtopic: change-id="Bild"class="Bild"...kannst du bestimmte id nur einmal, Klasse mal mehr..es wird nicht Ihr problem lösen, aber es wird Ihr unter anderem mehr gültig

InformationsquelleAutor Ashley Brown | 2013-08-18

  1. 8

    Entfernen Sie Ihre eigenen CSS-Datei für .col-lg-4: diese Ränder kann die Schraube bis das Bootstrap-CSS. Neben, dass diese Spalten sind nur sichtbar, wenn der Bildschirm Breite ist größer als 1200 px.

    Fügen Sie den folgenden Klassen Ihre divs: .col-xs-4 .col-sm-4 und .col-md-4, und geben Bildern eine class="img-responsive" Attribut.

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

    InformationsquelleAutor Harm Wellink

  2. 2

    Als Schaden Wellink erwähnt, entfernen Sie Ihre css-Dateien. Benötigen Sie lediglich den folgenden html-Code. Beachten Sie das "col-xs-4" und der "img-responsive" - Klasse. Sie brauchen keine col-sm-4 col-md-4 col-lg-4, wenn Sie die Absicht haben, die 3 Spalten auf allen Bildschirmgrößen.

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

    InformationsquelleAutor sevmusic

  3. 0

    Wenn ich verstehe deine Frage richtig, Sie möchte diese Bilder in einer horizontalen Linie mit einer bestimmten Menge an Raum zwischen den Bildern ?

    Zunächst um die DIV ' s in der Zeile ändern Sie die folgenden

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

    versuchen, geben Sie eine Breite für den container und Zeile (z.B. 100%) und dann deine divs halten der Bilder. Hoffe, dies hilft Ihnen aus?

    Ich fügte hinzu, CSS. Nicht etwas ändern. Auch ich habe die maxwidth:1000px des Behälters, um nur width:1000px. Die Zeile ist flüssig, so ist es 1000px entsprechen der container-Größe. Auch der col-lg-4 - Breite ist voreingestellt von bootstrap-CSS-33,3 px So.. keiner mehr einen Vorschlag?
    Es wird sehr empfohlen, das nicht zu ändern Attribute für solch eine gemeinsame Klasse. für einen bestimmten Zweck. Fügen Sie einfach eine weitere Klasse mit diesem Attribut und fügen Sie die Klasse auf Ihrem element, wenn Sie denken, dass dieses Attribut wird dein problem lösen.

    InformationsquelleAutor Harm Wellink

Schreibe einen Kommentar