在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:;

            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>

巴特西

Flex布局和Bootstrap布局两者的比较

在Bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。所以flex布局来协助。

bootstrap的布局方式

Flex的布局方式

Flex布局和Bootstrap两者相同的设计理念

最新文章

热门文章