3 Elemente pro Zeile in Bootstrap/WordPress

Lesezeit: 3 Minuten

Benutzer-Avatar
BioShock

Ich habe folgendes Problem: Ich muss ein wirklich einfaches Layout erstellen, in jeder Zeile möchte ich 3 Kästchen haben, die alle die gleiche Größe haben, und wenn ich das richtig verstanden habe, muss ich eine Struktur wie die folgende konstruieren, um dies zu erreichen :

<div class="row">
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
</div>

Dies ist mein PHP-Skript in der index.php:

    <?php while(have_posts()) : the_post();?>
       <div class="row">
         <div class=" news col-md-3 col-centered">
          <h4><a href="https://stackoverflow.com/questions/32098953/<?php the_permalink();?>"><?php the_title();?></a></h4>
          <p><?php the_excerpt(); ?> </p>
         </div>
       </div>
    <?php endwhile; wp_reset_query(); ?>

Mit diesem Code erhält jede Box eine <div class="row"> Element wie das folgende:

  <div class="row">
    <div class=" news col-md-3 col-centered">
    </div>
  </div>
...

Wie kann ich das beheben?

Folgendes bekomme ich jetzt: Wenn eine Box höher ist als eine andere, lässt sie den Raum darunter ohne Element.
Bild

Die Höhe der Box hängt vom Inhalt ab. was ich haben möchte ist sowas:
Bild2

Benutzer-Avatar
rnevius

Einfach verschieben row außerhalb von The Loop, damit es nicht wiederholt wird:

<div class="row">
    <?php while(have_posts()) : the_post(); ?>
        <div class="news col-md-4 col-centered">
            <h4><a href="https://stackoverflow.com/questions/32098953/<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
    <?php endwhile; wp_reset_query(); ?>
</div>

Außerdem müssen Sie Ihre Spaltenbreite auf ändern col-md-4da Bootstrap ein 12-Spalten-Raster verwendet und Sie 3 Spalten pro Zeile benötigen.

Wenn Sie tatsächlich jede Zeile schließen müssen, nachdem 3 Spalten angezeigt wurden, müssen Sie einen Zähler verwenden:

<div class="row">
    <?php $i = 1; while(have_posts()) : the_post();?>
        <div class="news col-md-3 col-centered">
            <h4><a href="https://stackoverflow.com/questions/32098953/<?php the_permalink();?>"><?php the_title();?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
        <?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
    <?php $i++; endwhile; wp_reset_query(); ?>
</div>

Dieses letzte Beispiel stellt sicher, dass alle Gleitkommazahlen gelöscht werden und dass sich jede Elementreihe in einer eigenen Zeile befindet.

  • Wenn ich die setze <div class="row">Außerhalb der Funktion und ich habe viele Posts, wird eine Struktur erstellt, die alle Posts innerhalb der enthält row Klasse, und nicht nur 3 Beiträge pro Zeile.

    – BioShock

    19. August 2015 um 15:00 Uhr


  • Es ist nichts falsch daran, mehr als 3 “Spalten” in einem Bootstrap zu haben .row. Wenn du die Breite auf eingestellt hast col-md-4werden die zusätzlichen Spalten in eine weitere “Zeile” auf der Seite umgebrochen.

    – rnevius

    19. August 2015 um 15:02 Uhr

  • Sie haben Recht. Tatsache ist, dass jede dieser Boxen eine andere Höhe hat, und ich möchte 3 Boxen alle auf derselben Linie haben, auch wenn eine höher als die andere ist, werde ich einen Screenshot von meinem tatsächlichen Ergebnis machen und was ich würde gerne haben

    – BioShock

    19. August 2015 um 15:03 Uhr

  • Dazu müssen Sie einen Zähler verwenden. Ich habe meine Antwort aktualisiert, um zu zeigen, wie Sie das tun würden.

    – rnevius

    19. August 2015 um 15:08 Uhr

1159060cookie-check3 Elemente pro Zeile in Bootstrap/WordPress

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy