Bootstrap 3 Fluid Grid Layout Probleme?

Im mit Bootstrap 3 zum layout meiner website mit fluid grid, aber die Boxen in der Startaufstellung nicht in eine Zeile.

Können Sie sehen: Bootstrap 3 Fluid Grid Layout Probleme?

Wenn eine box höher als die andere, das raster wird nicht Links ausgerichtet.

Wie kann ich es beheben mit etwas hack ? Danke für die Hilfe !

Hinweis : die Höhe der box ist auto wrap Inhalt.

Mein html-code 

    <div class="row">
     <?php foreach($contens as $content){?>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img href="<?php echo $content['image'];?>" />
        </div>
            ................ some code .............
       </div>
      </div>
    <?php } ?>
   </div>

InformationsquelleAutor der Frage Peter Jack | 2013-10-24

  1. 21

    Ich bin mir nicht sicher, was genau du versuchst zu erreichen, aber das Problem wird verursacht, weil der Inhalt der Spalten variiert in der Höhe. Es gibt insgesamt 3 Ansätze zu beheben " raster /Höhe Probleme..

    1. Eine CSS-Ansatz (mit CSS3 Spaltenbreite) wie diese..

    http://bootply.com/85737

    2. Ein 'clearfix' - Ansatz, wie dies (erfordert iteration jedes x Spalten). Dies ist der Ansatz empfohlen von Bootstrap bekannt als "responsive resets"..

    http://bootply.com/89910 (es gibt auch ein CSS-only variation dieses Ansatzes)

    3. Schließlich möchten Sie vielleicht benutzen Sie die Isotop - /Mauerwerk-plugin. Hier ist ein funktionierendes Beispiel, Isotop + Bootstrap..

    http://bootply.com/61482

    Update 2017

    Eine weitere option ist es, die Spalten die gleiche Höhe (mit flexbox):

    Da das Problem wird verursacht, durch die Unterschied in der Höhe, können Sie Spalten gleich Höhe durch jede Zeile. Flexbox ist der beste Weg, dies zu tun, und wird nativ unterstützt Bootstrap-4.

    .row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

    Flexbox gleicher Höhe Demo

    Mehr auf Bootstrap-Variable Höhe-Spalten

    InformationsquelleAutor der Antwort Themes.guide

  2. 3

    Durchzusetzen, die Höhe für jede <div> Spalte.

    Ich würde Ihr die Spalten a-Klasse name:

    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
    ...
</div>

    Tun, und dann etwas wie dieses:

    .outer {
    height: 200px /* Or whatever the height really is */
}

    Ihre Spalten sind, legte sich komisch wegen der unterschiedlichen Höhen der Boxen. Die Durchsetzung einer Höhe des container-Elements beheben.

    Der beste Teil ist, dass dies nicht erforderlich ist, Sie zu hinzufügen von zufälligen <div>'s, die haben nichts mit dem Gehalt zu tun.

    EDIT:

    Konnte Sie auch erzwingen, die Höhe nur, wenn Sie mit der 'sm' Haltepunkte und oben.

    Dieser würde sicherzustellen, dass alles Linien, wenn Spalten verwendet werden, und dass es keine großen Lücken zwischen den einzelnen ein, wenn Sie die volle Breite (d.h. col-xs-12).

    @media (min-width: 768px) {
    .outer {
        height: 200px /* Or whatever */
    }
}

    InformationsquelleAutor der Antwort ahuth

  3. 3

    Ich hatte ein ähnliches problem. Habe ich Fix mit diesem script ziemlich schnell und schmerzfrei:

    <script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>

    in Ihrem Fall, müssen Sie eine container-ID z.B. '#container' und fügen Sie die Klasse, um jedes Element, z.B. '.Element'

    InformationsquelleAutor der Antwort Adrian

  4. 0

    Ich glaube, Sie brauchen, um zu verwenden clearfix. setzen Sie einfach die Klasseclearfix auf Ihrem übergeordneten element (in deinem Fall, Zeile, glaube ich), und setzen Sie diese in Ihrer css:

    .clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

    InformationsquelleAutor der Antwort Samia Ruponti

  5. 0

    Ich Stimme mit Skelly, dass ein Mauerwerk-plugin ist wahrscheinlich der Weg zu gehen, aber für eine schnelle und einfache beheben, können Sie nur eine neue Zeile jedes mal, wenn Sie wollen, etwas Links ausgerichtet - eine quick-and-dirty-hack und kann einige Probleme haben auf kleineren viewports.

    InformationsquelleAutor der Antwort EnduroDave

  6. 0

    Meine Lösung:
    Ich arbeitete mit dem sichtbar - Klassen von bootstrap 3

    <div class="row">
<?php 
    $indexLg = 1;
    $indexSm = 1;
    foreach($contens as $content) {?>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="contents-block">
            <div class="image"><img href="<?php echo $content['image'];?>" />
            </div>
        </div>
    </div>
<?php
    if($indexLg%4 == 0) {
        $indexLg = 1;
        ?>
            <div class="clearfix visible-lg visible-md"></div>
        <?php
    } 
    if($indexSm%2 == 0) {
        $indexSm = 1;
        ?>
            <div class="clearfix visible-sm"></div>
        <?php
    }
    ?>
        <div class="clearfix visible-xs"></div>
    <?php
    }
} ?>

    InformationsquelleAutor der Antwort Dieter Casier

Schreibe einen Kommentar