Ich bin gerade dabei Bootstrap zu lernen und kämpfe sehr hart. Ich weiß, dass die Standardzeilenhöhe im Bootstrap die Höhe ist, die ein untergeordnetes Element (d. H. Eine Spalte) enthalten kann. Die Standardhöhe einer Spalte sollte jedoch den minimalen Speicherplatz einnehmen.Wie erzwingen Sie, dass eine Spalte div die gleiche Höhe ihrer Zeile hat?
Also meine Frage: Wie erzwinge ich die Höhe einer Spalte, um die Höhe der Zeile aufzunehmen? Sagen wir, ich habe zwei Spalten hintereinander. Die Höhe einer Spalte ist größer als die der anderen, da der Inhalt einer Spalte größer ist. Wie erzwinge ich, dass die Geschwisterspalte dieselbe Höhe hat?
Ich fühle mich wie ich alles versucht habe und kein Glück habe. Ich habe versucht, die Flex-Eigenschaften, die Tabelleneigenschaften, aber nichts funktioniert.
Ist es auch eine gute Übung für mich, die CSS von Bootstrap-Klassen zu ändern? Könnte dies nicht möglicherweise den gesamten Rahmen sprengen?
TLDR: Was ist die beste Methode zum Deklarieren von Div-Höhen im Bootstrap?
Als Beispiel, wie würde ich beide hallo da Divs auf die gleiche Höhe in der gleichen Zeile besetzen?
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <title>Coffeedev Data Dashboard</title>
\t \t <meta charset="utf-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t \t <style> body { padding-top: 70px;} .col-md-9{height: 100%}
\t \t </style>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
\t \t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
\t \t <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
\t </head>
\t <body>
\t \t <!-- Fixed navbar -->
\t <nav class="navbar navbar-default navbar-fixed-top">
\t <div class="container-fluid">
\t \t <div class="navbar-header">
\t \t <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
\t \t </div>
\t <div id="navbar" class="navbar-collapse collapse">
\t <ul class="nav navbar-nav">
\t <li class="active"><a href="#">Home</a></li>
\t <li><a href="#plot">Plot</a></li>
\t </ul>
\t </div>
\t </div>
\t </nav>
\t <!-- Main Container -->
\t <div class="container-fluid ">
\t \t <div class="row">
\t \t \t <div class="col-md-3">
\t \t \t \t \t <div class="alert alert-success" role="alert">
\t \t \t \t \t \t <h3> Hello there!</h3>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <br>
\t \t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-md-9">
\t \t \t \t \t <div class="alert alert-success" role="alert">
\t \t \t \t \t \t <h3> Hello there!</h3>
\t \t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12">
\t \t \t \t Hi there!
\t \t \t </div>
\t \t </div>
\t </div>
\t </body>
</html>Edit: Der Versuch, mit .row-eq-Höhe. Immer noch kein Glück.
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <title>Coffeedev Data Dashboard</title>
\t \t <meta charset="utf-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t \t <style> body { padding-top: 70px;}
\t \t </style>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
\t \t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
\t \t <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
\t </head>
\t <body>
\t \t <!-- Fixed navbar -->
\t <nav class="navbar navbar-default navbar-fixed-top">
\t <div class="container-fluid">
\t \t <div class="navbar-header">
\t \t <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
\t \t </div>
\t <div id="navbar" class="navbar-collapse collapse">
\t <ul class="nav navbar-nav">
\t <li class="active"><a href="#">Home</a></li>
\t <li><a href="#plot">Plot</a></li>
\t </ul>
\t </div>
\t </div>
\t </nav>
\t <!-- Main Container -->
\t <div class="container-fluid ">
\t \t <div class="row row-eq-height">
\t \t \t <div class="col-md-3" style="background-color: red">
\t \t \t \t \t Hello!
\t \t \t \t \t <br>
\t \t \t \t \t <br>
\t \t \t \t \t <br>
\t \t \t </div>
\t \t \t <div class="col-md-9" style="background-color: red">
\t \t \t \t Hello!
\t \t \t </div>
\t \t </div>
\t </div>
\t </body>
</html>
Es gibt zahlreiche Antworten alle bereit verfügbar auf SO plus dieses [Bootstrap Equal-Höhe-Spalten-Experiment] (http://getbootstrap.com.vn/examples/equal-height-columns/). Siehe auch http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – vanburen
Sie sollten die CSS der Bootstrap-Klassen nicht ändern. Sie sollten Ihre eigene CSS-Datei erstellen und die Eigenschaften der darin enthaltenen Klassen überschreiben –