使用 bootstrap 4 创建 5 个响应式部门答案

【问题标题】：create 5 responsive divisions using bootstra 4使用 bootstrap 4 创建 5 个响应式部门
【发布时间】：2020-05-01 21:34:01
【问题描述】：

我正在尝试使用 bootstrap 4 创建 5 个响应式分区。我如何创建与 5 个分区相同的分区。请检查我的代码。

如果可以的话，请做样品。很大的帮助

    <div class="col-auto">
                  <i class="fas fa-align-center"></i>
                   <label> Job code </label>
                   <label> 123456</label>
</div>


  <div class="col-auto">
                  <i class="fas fa-align-center"></i>
                   <label> Project Name </label>
                   <label> A & D Cloud implementation</label>
</div>

  <div class="col-auto">
                  <i class="fas fa-align-center"></i>
                   <label> Project Start Date </label>
                   <label> 2020-04-30</label>
</div>

  <div class="col-auto">
                  <i class="fas fa-align-center"></i>
                   <label> Task Assigned Hours: </label>
                   <label> 05</label>
</div>

  <div class="col-auto">
                  <i class="fas fa-align-center"></i>
                   <label> Task Remaining Time:  </label>
                   <label> 01.00.00</label>
</div>

【问题讨论】：

您应该查看网格系统上的引导文档

标签： html css bootstrap-4 responsive-design

【解决方案1】：

在 Bootstrap 中，列类只能在一行内工作。这又需要一个 .container 或 .container-fluid 类才能工作。所以你可以试试这个：

<div class="container">
        <div class="row">
                <div class="col-auto"></div>
                <div class="col-auto"></div>
                <div class="col-auto"></div>  
                <div class="col-auto"></div>       
        </div>
</div>

【讨论】：