wake-up-neo.net

Bootstrap-Spalte mit gleicher Höhe, 3 Zeilen ansprechend

Hallo, ich habe vier Divs in einer Bootstrap-Reihe. Ich möchte, dass alle Divs in dieser Zeile dieselbe Höhe haben und nicht die Verantwortung verletzen. Ich weiß nicht, wie ich das machen soll, ohne die Verantwortung zu brechen. 

Ich habe versucht, dieses Problem mit festen Höhen zu lösen, aber in Bezug auf die Reaktionsfähigkeit ist dies eine schlechte Lösung.

Vielen Dank :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>
35
user3279494

Sie können dies erreichen, indem Sie Javascript verwenden. Finden Sie die größte Höhe der 4 Divs heraus und stellen Sie alle auf derselben Höhe wie der größte her.

Hier ist der Code:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});
63
paulalexandru

Es gab einmal ein offizielles experimentelles Beispiel von Spalten gleicher Höhe, die CSS flexbox mit Bootstrap verwendeten. Hier ist der Kern davon:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Und dann <div class="row row-eq-height"> anstelle von <div class="row"> verwenden.

Beachten Sie, dass Flexbox in IE <10 nicht unterstützt wird.

22
cvrebert

Zu Ihrer Information - Ich habe dies getan, um mein Problem zu lösen und um reaktionsfähige Haltepunkte zu integrieren, die mit den Haltepunkten in Bootstrap übereinstimmen. (Ich verwende LESS-Variablen von Bootstrap, um die Haltepunkte zu synchronisieren, aber unten ist die kompilierte CSS-Version.)

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

fügte dann die erforderlichen Klassen zum übergeordneten Element hinzu.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>
8
FourLeafCleaver

EDIT 1: Ich musste jemandem damit helfen, also habe ich ein plunkr ..__ gemacht. Gehe zu "script.js" und kommentiere "bootstrap_equalizer ();" Funktion, um den ursprünglichen Bootstrap ohne Spalten gleicher Höhe zu sehen.

Ich weiß, dass dies etwas spät ist, aber ich bin mir sicher, dass dies den Code verbessern und anderen helfen könnte! :)

Da ich gewohnt bin, mit Foundation 5 zu arbeiten, vermisse ich den "Equalizer", wenn ich mit Bootstrap arbeiten muss.

Ich mache eine kleine Funktion, um auf Seiten aufzurufen, auf denen Sie einige Spalten "ausgleichen" müssen . Mein Code basiert auf der Antwort von @paulalexandru!

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

Auf der HTML-Seite müssen Sie nur Folgendes tun: 

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

spalte 1 und Spalte 2 haben die gleiche Höhe! Sie können natürlich mehr als 2 Spalten haben!

Hoffe das kann helfen! =)

5
maxime1992

Sie können die display:table-Eigenschaften verwenden:

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Beispiel

Update

Da die Leute dies scheinbar nach unten neigen, da Bootstrap kaputt geht, sollten Sie die Elemente mit verschiedenen Klassen auf die von Bootstrap verwendeten Klassen ausrichten. Daher finden Sie hier eine aktualisierte Geige, die den Rest des Bootstraps nicht zerstört - für den obigen Code Fügen Sie der Zeile eine weitere Klasse von table-row hinzu. Dann können Sie die folgenden Stile verwenden:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Beispiel

2
Pete

Ich hatte die gleiche Situation, in der jede Spalte in einer Reihe dieselbe Höhe haben sollte. Unter Berücksichtigung der obigen Antworten und mit wenig Trick war es einfach, das Problem der Fenstergröße auch zu implementieren und zu lösen.

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

Schauen Sie sich die Demo hier an - https://jsfiddle.net/3Lam7z68/ (Verkleinern Sie das Ausgabefenster, um zu sehen, wie sich die Größe der einzelnen Div-Spalten ändert).

2
Nirav Varma

Um die Höhe der Spalten zu erreichen und die Reaktionsfähigkeit nicht zu beeinträchtigen, sollten Sie Folgendes versuchen:

https://github.com/liabru/jquery-match-height

Es verwendet "JQuery". Für mich ist es bisher die einfachste Lösung.

1
Omar Gonzales

Bootstraps Experiment , wie von @cvrebert erwähnt, funktioniert für mich unter Microsoft Internet Explorer (Version 11) und Mozilla Firefox (Version 37), jedoch nicht unter Google Chrome (Version 42, 64-Bit) ).

Inspiriert durch die Antworten von @ cvrebert und @ Maxime habe ich diese Lösung gefunden, die für mich in diesen drei Browsern funktioniert. Ich habe mich entschieden, es weiterzugeben, vielleicht können es auch andere verwenden.

Angenommen, Sie haben so etwas in Ihrem HTML-Code:

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

Fügen Sie dies zu Ihrer JS hinzu:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

Es verwendet die Funktion .outerHeight () von jQuery , um die inneren Höhen von div zu berechnen und festzulegen.

Ich habe dies auch in mein CSS eingefügt, ich bin mir nicht sicher, ob das hilft, aber es tut sicher nicht weh:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Für Leute, die für diese Lösung in React hierher kommen, ist es hier:

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.Push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

Dann zu deinen Spalten: 

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

Genießen ;)

0
Emidomh

Ich bin ein bisschen spät im Spiel, aber ....

Dadurch werden die Höhen der Elemente in einer Reihe mit einer Klasse von "Zeilenhöhenanpassung" abgeglichen. Es stimmt mit den Zellen überein, basierend auf ihrem oberen Wert. Wenn sie sich also verkleinern, wenn die Seite kleiner wird, kann ich die Höhe nicht einstellen.

Ich weiß, dass es eine Reihe von CSS-Versionen gibt, die jedoch alle mein Layout-Design beeinträchtigen.

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.Push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})
0
Beakie

Damit alle div dieselbe Höhe haben, müssen Sie eine feste Höhe für das innere div angeben (div class = "well").

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

Sie können beispielsweise diesem Link demo folgen.

0
shan

Wenn sich jemand für eine reine CSS-Lösung interessiert, die die Reaktionsfähigkeit nicht beeinträchtigt, hat dies für mich funktioniert (beachten Sie, dass ich die Klasse "row-eq-height" hinzugefügt habe, in der die "row" -Klasse Bootstrap css klären soll und nicht stört und änderte "md" für "xs", um es in der Demo besser zu überprüfen).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>              

css:

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Sie können eine Demo hier überprüfen.

0
gugol

Ich denke, dass die Antwort von Paulalexandru ziemlich gut ist. Ich würde nur etwas Code hinzufügen, um Probleme zu vermeiden, wenn das Fenster seine Größe ändert. Wenn die div mit der größten Höhe ein Foto enthält, kann es zu Problemen kommen, wenn sich die Breite des Bildes ändert, da sich auch die Höhe ändert. In diesem Fall sollten Sie sich mit resizeevent befassen.

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}
0
Luis González