Frage Stellen Sie die Spalten im Bootstrap auf die gleiche Höhe


Ich habe drei Spalten in einer Reihe. Ich möchte, dass alle drei Spalten die gleiche Höhe haben (füllen Sie den gesamten Leerraum aus)

Momentan sieht es so aus:

enter image description here

Wie Sie sehen können, hat die linke Spalte die richtige Höhe. Wo die Mitte und die Rechte nicht sind.

Das Gerüst sieht so aus:

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

Ich habe versucht, die mittlere und die richtige Spannweite von 100% zu geben, aber das tut es nicht. Kann mich jemand in die richtige Richtung führen?

Ich benutze die neueste Version von Twitter Bootstrap


10
2017-08-14 09:00


Ursprung


Antworten:


Sie können dies ohne JS lösen. Benutz einfach

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

Es macht Magie :)

Ein Beispiel, das ich gemacht habe: http://fiddle.jshell.net/E8SK6/1

Ergebnis: http://fiddle.jshell.net/E8SK6/1/show/

Bearbeiten:

Da Sie bei einem Kommentar gesagt haben, dass das Menü immer das größte ist, können Sie dieses neue Beispiel verwenden: http://fiddle.jshell.net/E8SK6/5/

Wenn Sie nicht wissen, welcher von ihnen am längsten ist, vielleicht die Antwort auf Dieser Thread ist besser. Es verwendet display: table-cell. Hierist das Beispiel


12
2017-08-14 09:12



Ich habe diese Lösung für Bootstrap 3 gefunden, die gut für mich funktioniert

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Es verwendet diese Stile:

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}
/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

Und dieses Markup

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

19
2017-07-29 09:39



Ah, das ist ein uraltes Problem.

Wenn Sie für ein Element eine Höhe von 100% festlegen, benötigt das übergeordnete Element eine festgelegte Höhe, damit es ausgelöst werden kann. Da die div.row eine Flüssigkeitshöhe hat, wird das nicht funktionieren.

Der Weg dahin wäre:

Stellen Sie eine feste Höhe auf dem div.row (wahrscheinlich keine gute Idee, wenn Sie ein flüssiges Design wünschen)

oder

Verwenden Sie jQuery, um es zu tun:

HTML

<div class="row equalHeight">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
</div>

jQuery

$('.equalHeight').each(function() {
  var eHeight = $(this).innerHeight();

  $(this).find('div').outerHeight(eHeight);
});

2
2017-08-14 09:07



Heute ist möglich mit row-eq-height

VERKNÜPFUNG:  http://getbootstrap.com.vn/examples/equal-height-columns/


0
2017-08-08 21:06