帶有引導程序的html和css：網格結構不對齊
[英]html and css with bootstrap: grid structure does not align
問題描述
我試圖通過引導使用網格結構來創建一個漂亮的頁面。 但是，我的div已移動，行中的列不再對齊：
具有三個的框應與藍色背景對齊。 我究竟做錯了什么？ 這是什么原因呢？ 我想了解。 我的代碼是：
EDIT1
我在<h1>添加了no-marg ，但現在看起來像這樣：如何獲得完整的高度？
.no-marg{ margin:0 !important; padding:0 !important; } .sm-pad{ padding:5px; background-clip:content-box; } .col-white{ color:white; } .dark-theme { color: white; background-color:#17191B; height: 100%; } #step-no{ margin:20px; } .light-theme { color: black; background-color:#EFEFEF; } .cont-box { margin:6px; } body { background: black; } @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } .red-square{ background-color: red; border-radius: 0; } .btn:hover{ background-color: #78BE20; } .blue-rectangle{ background-color: #008ECF; border-radius: 0; height: 100%; }
<!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> <link rel="stylesheet" href="work_step_v1.css"> </head> <body> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10"> <h1 class="col-white">Step</h1> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10 blue-rectangle"> <div class="row equal"> <div class="col-sm-3"> <div class="dark-theme"> <h1 class="col-white">3</h1> </div> </div> <div class="col-sm-9"> <span color<img alt="Warning Logo" src="./image/warning.svg"> </div> </div> <div class="row equal"> <div class="col-sm-6"> </div> <div class="col-sm-6"> </div> </div> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <script src="steps_v1.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2017-08-03 11:35:25
盒子頂部有一個邊緣。 設置為0
.no-marg{ margin:0 !important; padding:0 !important; } .sm-pad{ padding:5px; background-clip:content-box; } .col-white{ color:white; } .dark-theme { color: white; background-color:#17191B; height: 100%; } #step-no{ margin:20px; } .light-theme { color: black; background-color:#EFEFEF; } .cont-box { margin:6px; } body { background: black; } @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } .red-square{ background-color: red; border-radius: 0; } .btn:hover{ background-color: #78BE20; } .blue-rectangle{ background-color: #008ECF; border-radius: 0; height: 100%; }
<!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> <link rel="stylesheet" href="work_step_v1.css"> </head> <body> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10"> <h1 class="col-white">Step</h1> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10 blue-rectangle"> <div class="row equal"> <div class="col-sm-3"> <div class="dark-theme"> <h1 class="col-white no-marg">3</h1> </div> </div> <div class="col-sm-9"> <span color<img alt="Warning Logo" src="./image/warning.svg"> </div> </div> <div class="row equal"> <div class="col-sm-6"> </div> <div class="col-sm-6"> </div> </div> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <script src="steps_v1.js"></script> </body> </html>
解決方案2
0 2017-08-03 11:34:49
添加display: -webkit-box; 到.dark-theme
.no-marg{ margin:0 !important; padding:0 !important; } .sm-pad{ padding:5px; background-clip:content-box; } .col-white{ color:white; } .dark-theme { color: white; background-color:#17191B; height: 100%; display: -webkit-box; } #step-no{ margin:20px; } .light-theme { color: black; background-color:#EFEFEF; } .cont-box { margin:6px; } body { background: black; } @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } .red-square{ background-color: red; border-radius: 0; } .btn:hover{ background-color: #78BE20; } .blue-rectangle{ background-color: #008ECF; border-radius: 0; height: 100%; }
<!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> <link rel="stylesheet" href="work_step_v1.css"> </head> <body> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10"> <h1 class="col-white">Step</h1> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <div class="row equal"> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span> </div> <div class="col-sm-10 blue-rectangle"> <div class="row equal"> <div class="col-sm-3"> <div class="dark-theme"> <h1 class="col-white">3</h1> </div> </div> <div class="col-sm-9"> <span color<img alt="Warning Logo" src="./image/warning.svg"> </div> </div> <div class="row equal"> <div class="col-sm-6"> </div> <div class="col-sm-6"> </div> </div> </div> <div class="col-sm-1 red-square"> <span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span> </div> </div> <script src="steps_v1.js"></script> </body> </html>
如何在 html css 和 bootstrap 中創建這種類型的結構？
[英]How To Create This Type of Structure in html css and bootstrap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.