在Bootstrap中采用12柵格的布局，12份隨意分配，但是不能解決5等分，7等分的問題。所以flex布局來協助。
bootstrap的布局方式
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
<div class="row">為父容器，class聲明自己在容器中占據幾個。
Flex的布局方式
聲明的方式如下
.Grid { display: flex; } .Grid-cell { flex: 1; text-align: center; margin:10px; }
在html代碼中，添加css的引用
<div class="Grid"> <div class="Grid-cell"> <svg id="fillgauge2" width="100%" height="200" onclick="gauge2.update(NewValue());"></svg> <label>CPU占有率</label> </div> <div class="Grid-cell"> <svg id="fillgauge3" width="100%" height="200" onclick="gauge3.update(NewValue());"></svg> <label>CPU占有率</label> </div> <div class="Grid-cell"><svg id="fillgauge4" width="100%" height="200" onclick="gauge4.update(NewValue());"></svg> <label>CPU占有率</label></div> <div class="Grid-cell"><svg id="fillgauge5" width="100%" height="200" onclick="gauge5.update(NewValue());"></svg> <label>CPU占有率</label></div> <div class="Grid-cell"><svg id="fillgauge6" width="100%" height="200" onclick="gauge6.update(NewValue());"></svg> <label>CPU占有率</label></div> </div>
<div class="Grid"> 中有5個層，<div class="Grid-cell">，這5個層flex=1，然后每個層占得比例為 1/(1+1+1+1+1)
Flex比Bootstrap的布局適應性更強，因為flex是基於靈活布局，而Bootstrap是自定義寬度布局，當刪除元素時這些顯得尤為明顯。
Flex布局和Bootstrap兩者相同的設計理念
1、內部的孩子節點無margin，元素之間的空隙用padding和border進行間隔，以及box-sizding:bording-box進行寬高的界定。
2、兩者都完美適配手機。
但是flex 存在嚴重問題，一行放4個，但是不夠4個有時候不能夠自適應，也要求剩余1部分。
bootstrap自適應能力不如flex布局。
經過了很長時間。我們發現了 flex布局有很強的優越性，而bootstrap不行了。
1、abc a固定，c固定，b要進行自適應。使用flex:1
2、flex不受margin-left 和margin-right的影響。而bootstrap對這塊支持的特別慘。
結合京東頂部的設計。
仿照京東我們自己也做了一個。
我們提供如下的代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <script src="Scripts/jquery-3.4.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <link href="Reset.css" rel="stylesheet" /> <link href="Content/octicons.css" rel="stylesheet" /> <style> #d1 { height: 50px; line-height: 50px; background-color: aqua; color: cadetblue; display: flex; } #d1 .left { height: 50px; line-height: 50px; float: left; padding-left: 10px; } #d1 .center { flex: 1; margin-left: 20px; margin-right: 20px; height: 50px; line-height: 50px; } #d1 .right { height: 50px; line-height: 50px; float: right; padding-right: 10px; } </style> </head> <body> <div id="d1"> <div class="left "> 掃碼<i class="octicon octicon-alert"></i> </div> <div class="center"> <input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px; padding-left: 20px; " placeholder="請您輸入......" /> </div> <div class="center" style="flex:2"> <input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px; padding-left: 20px; " placeholder="請您輸入......" /> </div> <div class="right"> 城市列表<i class="octicon octicon-bold"></i> </div> </div> </body> </html>