bootstrap4网格系统，布局

外层div使用row,里边使用col就可以实现均分了，有n个就n等分,这样想要做均分的布局就非常方便了

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row" style="margin-top: 20px">
    <div class="col" style="background-color:#acbdff;">.col</div>
    <div class="col" style="background-color:#ffabcd;">.col</div>
    <div class="col" style="background-color:#acbdff;">.col</div>
    <div class="col" style="background-color:#ffabcd;">.col</div>
    <div class="col" style="background-color:#acbdff;">.col</div>
</div>

<div class="professional_container" style="margin-top:46px">
    <div class="title" style="font-weight: 600;font-size: 22px">系统化打造专业师资</div>
    <div class="row" style="margin-top: 20px">
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
        <div class="col professional_item" style="background-color:#ffabcd;">.col</div>
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
        <div class="col professional_item" style="background-color:#ffabcd;">.col</div>
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
    </div>
    <div class="row" style="margin-top: 5px">
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
        <div class="col professional_item" style="background-color:#ffabcd;">.col</div>
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
        <div class="col professional_item" style="background-color:#ffabcd;">.col</div>
        <div class="col professional_item" style="background-color:#acbdff;">.col</div>
    </div>
</div>

一点样式：

.professional_item {
     height: 100px;
     margin: 20px;
}

当然设置margin也可以分别设置来根据实际需求调整

比如下面这样，根据上左下右来设置

.specialist_container .item>div {
      margin: 10px 12px 10px 12px;
}

放点背景图片后效果就会好一点：

如果不是均分，比例可以使用后面接数字来控制
bootstrap总共是占了12份，col-x
比如我想分成一个5份，其中4份各站的比例为2,另外一份占的比例为4，就可以这样

<div class="row">
    <div class="col-2" style="background-color:lavender;"></div>
    <div class="col-2" style="background-color:orange;"></div>
    <div class="col-2">.col</div>
    <div class="col-2">.col</div>
    <div class="col-4" style="background-color:#ffabcd;"></div>
</div>

哈哈哈，来看一下今天的布局效果：

来来来体验一下后端程序员写的样式，请用电脑浏览哟：
https://www.tnblog.net/zuxia_style/index.html