Bootstrap/Aufteilung klappt nur mittels <br>

tklustig

Erfahrenes Mitglied
Hallo Leute,
meine Intention ist es, mittels Bootstrapanweisungen immer genau vier Elemente nebeneinander zu plazieren. Das Array enthält entweder 4,8,12 etc.. Elemente.Leider klappt die Aufteilung nicht(s. Aufteilung_Bootstrap.jpg)
Das Bild(also das fünfte Element) wird nicht unterhalb des ersten Bildes platziert. Die Aufteilung klappt nur dann (s. Aufteilung_Bootstrap_klein.jpg), wenn ich die Bilder ganz klein einfügen lasse oder 7 <br>-Tags hinter der Wohnfläche einfüge. Wie codiere ich richtig, bzw. wie ersetze ich die <br>-Tags?
CSS:
<div class=""jumbotron>
    <div class="container-fluid">
        <div class="col-md-12">
            <div class="page-header">
                <h3>Immobilienofferten <small><?= $count ?> Angebote gefunden</small></h3>
            </div>
            <?php
            for ($i = 0; $i < count($ArrayOfFilename); $i++) {
                ?>
                <div class="col-md-3">
                    <?=
                    Html::a(
                            Html::img(
                                    "@web/img/$ArrayOfFilename[$i]", ['alt' => 'PicNotFound', 'class' => 'img-circle', 'style' => 'width:125px;height:125px']
                            ), ['/immobilien/index', 'id' => $ArrayOfImmo[$i]], ['title' => 'Anlagen anzeigen', 'data' => ['pjax' => '0']]
                    )
                    ?>
                </div>
                <div class="col-md-3">
                    <?= "<label>Ort</label>" ?>
                </div>
                <div class="col-md-3">
                    <?= "<label>Kaufpreis</label>" ?>
                </div>
                <div class="col-md-3">
                    <?= "<label>Wohnfläche</label>" ?>
                </div>
            <?php } ?>
        </div>
    </div>
</div>
 

Anhänge

  • Aufteilung_Bootstrap.jpg
    Aufteilung_Bootstrap.jpg
    260,8 KB · Aufrufe: 4
  • Aufteilung_Bootstrap_klein.jpg
    Aufteilung_Bootstrap_klein.jpg
    107,7 KB · Aufrufe: 4
Hey tklustig,
ohne die zugehörigen CSS-Klassen ist es schwer das Problem zu indentifizieren.
Könntest du die Klassen Definitionen mal bitte posten?

BTW:
PHP:
<?= "<label>Wohnfläche</label>" ?>

Sowas brauchst du nicht extra durch PHP ausgeben zu lassen.

Es reicht also, wenn dein Code so aussieht:
HTML:
<div class="col-md-3">
   <label>Wohnfläche</label>
</div>
 
Hier der gesamte Code mit den 7 <br>-Tags
CSS:
<?php

use yii\helpers\Html;
?>
<?php ?>
<div class="container-fluid">
    <br><div class="col-md-12">
        <?= Html::a(Yii::t('app', 'zurück'), ['/site/index'], ['class' => 'btn btn-primary']) ?>
    </div>
    <div class="col-md-12">
        <div class="page-header">
            <h2>Immobilienofferten <small><?= $count ?> Angebote gefunden</small></h2>
            <p>Pushen Sie auf die Immobilienbilder, um mehr Informationen abzurufen </p>
        </div>
        <div class="row">
            <?php
            for ($i = 0; $i < count($ArrayOfFilename); $i++) {
                ?>
                <div class="col-md-3">
                    <?=
                    Html::a(
                            Html::img(
                                    "@web/img/$ArrayOfFilename[$i]", ['alt' => 'PicNotFound', 'class' => 'img-circle', 'style' => 'width:125px;height:125px']
                            ), ['/immobilien/index', 'id' => $ArrayOfImmo[$i]], ['title' => 'Immobiliendaten abrufen', 'data' => ['pjax' => '0']]
                    )
                    ?>
                </div>
                <div class="col-md-3">
                    <?= "<label>Standort: $ArrayOfPlz[$i] $ArrayOfTown[$i]</label><br>" ?>
                    <?= "<label>Strasse: $ArrayOfStreet[$i]</label><br>" ?>
                    <?= "<label>Wohnfläche: $ArrayOfGroesse[$i] m<sup>2</sup></label><br>" ?>
                    <?= "<label>Zimmer: $ArrayOfRooms[$i]</label><br>" ?>
                    <?= "<label>$ArrayOfArt[$i]: $ArrayOfMoney[$i] €<br>" ?>
                </div>
                <?php
                if ($i >= 1 && $i % 2 != 0) {
                    echo "<br><br><br><br><br><br><br>";
                }
            ?>
        </div>
        <hr>
        <h3>Immobilienofferten <small>ohne Bilder</small></h3>
        <hr>
        <?php
        foreach ($ArrayOfDifference as $attribute) {
            $town = frontend\models\Immobilien::findOne(['id' => $attribute])->stadt;
            $street = frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->strasse;
            $wohnflaeche = frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->wohnflaeche;
            $raeume = frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->raeume;
            $kosten = frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->geldbetrag;
            $betrag = number_format(
                    $kosten, // zu konvertierende zahl
                    2, // Anzahl an Nochkommastellen
                    ",", // Dezimaltrennzeichen
                    "."    // 1000er-Trennzeichen
            );
            if (frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->l_art_id == 1) {
                $begriff = "Kaltmiete";
            } else if ((frontend\models\ImmobilienSearch::findOne(['id' => $attribute])->l_art_id == 2)) {
                $begriff = "Kaufpreis";
            }
            ?>
            <div class="col-md-12">
                <label>Standort:</label><label><?= $town ?>,</label>
                <label>Strasse:</label><label><?= $street ?>,</label>
                <label>Wohnfläche:</label><label><?= $wohnflaeche ?>,</label>
                <label>Zimmer:</label><label><?= $raeume ?>,</label>
                <label><?= $begriff ?>:</label><label><?= $betrag ?> €</label> <?= Html::a(Yii::t('app', 'zum Angebot'), ['/immobilien/index', 'id' => $attribute], ['class' => 'btn btn-success']) ?>
            </div>
        <?php }
        ?>
    </div>
</div>
 
Zurück