ID möchte meine Homepage in 3 Teile zu teilen. Grundsätzlich geteilt horizontal 30%, 70% und dann teilen Sie die zweite Zeile in zwei 50%, 50% Spalten nur, wie ich weiß, ist mit Frameset aber da ich Bootstrap verwenden muss.Wie teilt man Seite beide horizontal und vertikal mit Bootstrap
Bootstrap hat Spalten, diese Spalten teilen die Seite in 12 Abschnitte. Wenn Sie also eine Zeile in 50% 50% geteilt haben möchten, können Sie unten sehen, wie es geht.
HTML
<div class="row">
<div class="col-xs-6">
test
</div>
<div class="col-xs-6" style="background-color:red">
test
</div>
</div>
CSS
.row .col-xs-6{
height: 100px;
background-color: black;
color: white;
}
https://jsfiddle.net/7g7Lh2L2/3/
so, wenn Sie die Spalte unterschiedliche Breiten dann ändern Zahl nach xs hinzufügen möchten, empfehle ich Ihnen bei Grids für Bootstrap aussehen.
Versuchen Sie folgendes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">One</div>
<div class="col-sm-9" style="background-color:lavenderblush;">Two</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">Three</div>
<div class="col-sm-6" style="background-color:lavenderblush;">Four</div>
</div>
</div>
</body>
</html>
Verwendung Bootstrap-Raster. Lesen Sie hier mehr: http://getbootstrap.com/css/#grid – tech2017
ehrlich? Hast du überhaupt versucht, die Dokumentation zu öffnen? Zeug wie Gitter ist dort gut vorhanden. Auch welche Version von Bootstrap benutzt du? –