Bootstrap 3 Spalten neben einander?

Ich bin versucht, ein raster von responsive Bilder mit bootstrap 3, aber wenn ich versuche, legte Sie zusammen, einen an einem mit dem nachstehenden code in den letzten 2 Spalten geht hinunter Weg von den anderen Spalten :

Dies ist, was ich versuche zu erreichen :

HTML :

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img" src="path/to/image" />
        </div>
    </div>
</div>

CSS :

.row { overflow:hidden; }
.img { min-width:100%; max-width:100%; min-height:100%; max-height:100%; }
.col-md-3 { min-height:100%; max-height:100%; }

HINWEIS : wenn ich die max-min-Höhe/-Breite, der durch die Pixel und ich Größenänderung des Fensters die Spalten überschneiden, so habe ich, um es durch den Prozentsatz! und immer noch nicht das Ergebnis, das ich will.

wird jede Hilfe zu schätzen wissen.

in Ihrem Wunsch pic es die gleiche Höhe, sondern die in Ihren Resultat-pic, dass ist nicht die gleiche Höhe... richtig???
Yup, die wollen pic ich habe eingestellt, dass die Höhe der durch die Pixel, sondern die Spalten überlappen einander, wenn ich die Größe der Fenster, und in der Folge pic ich habe eingestellt, dass die Höhe durch den Prozentsatz, also das Ergebnis ist nicht das, was ich will. @Bhojendra-C-LinkNepal
Dieses Verhalten ist normal mit gefloateten Elementen. Willst du einen jQuery oder css-Lösung?
jede von Ihnen sollte es aber eine css-Lösung, warum jquey? @Christina
ein Skript kann tuck die Spalten/Boxen wie Ziegel (Mauerwerk) CSS (ohne Verwendung von flexbox) nicht möglich ist.
Jede Lösung, JEDE! auch wenn php @Christina
wollen Sie genau den Wunsch-Bild-div-und img-Höhe,dann seine einfach
Ich meine gleicher Höhe für alle div -??
.img { min-width:100%; max-width:100%; min-height:100%; max-height:100%; } .col-md-3 { min-height:100%; max-height:100%; } müssen Sie die Höhe in PX nicht in %

InformationsquelleAutor Amr SubZero | 2014-11-25

css html twitter-bootstrap twitter-bootstrap-3

5

Hier ist ein Weg, es zu tun, durch die Umwandlung der raster, in diesem Fall nur, um inline-block. Das ist die css-und html unter. Eine andere Möglichkeit ist ein Skript verwenden, setzt sich das raster wie Mauerwerk Blöcke, tuck unter einander, die Sie verwenden können, jscripts, wie Mauerwerk, Maurer, Isotopen -, shuffle-und eine Reihe anderer Schriften. Hier ist ein Beispiel, shuffle https://jsbin.com/vaquci/2

DEMO: https://jsbin.com/rurap/1/

https://jsbin.com/rurap/1/edit?html,css-Ausgabe

Bootstrap 3 Spalten neben einander?

CSS

/* demo */
.col-sm-4 {border:1px solid red;}
.well {height:200px;}
.height1 {height:250px}
.height2 {height:300px}
/* demo */


@media (min-width:768px) {
    .inline-block-row {
        word-spacing: -1em;
        letter-spacing: -1em;
        overflow:hidden;
    }
    .inline-block-row .col-sm-4 {
        word-spacing: normal;
        vertical-align: top;
        letter-spacing: normal;
        display: inline-block;
        float:none;
    }
}
@media (min-width:992px) {
    .inline-block-row .col-md-3 {
        float:none;
    }
}

HTML:

<div class="container-fluid">
   <h1>Inline Block Grid</h1>
   <div class="row inline-block-row">
      <div class="col-sm-4 col-md-3">
         <div class="well height1">1</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">2</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">3</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 4</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 5</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height2"> 6</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height1"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
   </div>
</div>

Du bist eine tolle person! nun werd ich ändern alle meine Projekte mit diesem Weg, vielen Dank für die Hilfe 🙂 geschätzt ♥

InformationsquelleAutor Christina

1

Einfache Lösung

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    ... more rows
</div>

CSS:

div.row > div {
   padding-bottom: 30%; //This will give height 
}

kann ich nicht Zeile div mehr als 1 mal weil ich beim abrufen eine Zeile div frorm der Datenbank, thnx 4 die trotzdem helfen.
Ich füge img-responsive Klasse des img wird das Bild schnell, und der padding: 20%; macht es total Ansprechend.
Vielen Dank für die Hilfe @Junaid

InformationsquelleAutor Junaid

1

Wenn Sie nicht brauchen, dass alle Boxen die gleiche Höhe haben, sollten Sie versuchen zu verwenden, Mansory plugin http://desandro.github.io/masonry/. Es ist das beste plugin für diese Art von raster.
Aber wenn Sie brauchen, dass alle Boxen die gleiche Höhe haben. Erhalten Sie die höchste Höhe und für alle Boxen. So:

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 item">
            <img class="img src="path/to/image" />
        </div>
    </div>
</div>

var highestH = 0;
var height = 0;
$('.container-fluid .item').removeAttr('style');
    $('.container-fluid .item').each(function () {
        //verify highest height
        height = $(this).outerHeight();
        if (height > highestH) {
            highestH = height;
        }
        height = highestH;

    });
    $('.container-fluid .item').outerHeight(height);

InformationsquelleAutor Raul Neto

1

Können Sie lösen dieses Problem sehr einfach, ohne jede benutzerdefinierte CSS und nur geringfügige änderungen an den HTML-Code. 2 Möglichkeiten, eigentlich.

1 - Sie können jede Zeile der Spalten in eigenen <div class="row">:

2 - Oder werfen Sie einen <div class="clearfix"></div> nachdem das Letzte Element jeder Zeile (nicht .row), oder kombinieren Sie es mit der hidden/visible helper-Klassen, wenn #1 verwirrt mit Ihrem responsive layout.

http://www.bootply.com/yC3nVhlb64
- ich kann nicht die clearfix-div nach e.x 4 Spalten, weil ich bin das abrufen von Spalten aus der Datenbank, so dass Sie dynamisch sind, wenn ich einen clearfix es wird nach jeder Spalte, so dass jede Spalte wird allein in einer Zeile. aber es ist eine gute Lösung, wenn nicht mit Datenbank, vielen Dank für die Hilfe von Shawn, die ich wirklich zu schätzen Ihre Hilfe.
InformationsquelleAutor Shawn Taylor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.