html - 大小均匀的 Bootstrap 列未正确对齐

Question

我在引导容器类中有 3 个大小均匀的列，我希望将它们显示在同一行上。 (直到它们在较小的屏幕上同时折叠)目前，前两列水平对齐，但第三列直接位于第一列下方。我花了一些时间调整我的 CSS 和 html，但无济于事。

我浏览了我的问题的相关答案，因为我确信这是一个非常简单的问题，但是我找不到任何东西。任何解决方案将不胜感激。

( bootstrap v4.4.1)

.cmsInterface {
  background: yellow;
  margin: 1em;
  padding: 1em;
  padding-top: 5em;
  padding-bottom: 5em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">

    <div class="col-lg-4 cmsInterface" id="cms1" align="center">
      <h5><a href=""><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></a></h5>
    </div>

    <div class="col-lg-4 cmsInterface" id="cms2" align="center">
      <h5><a href="eventportal.php"><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></a></h5>
    </div>

    <div class="col-lg-4 cmsInterface" id="cms3" align="center">
      <h5><a href="staffportal.php"><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></a></h5>
    </div>

  </div>
</div>

代码当前在浏览器中的外观的屏幕截图:

Answer 1

boostrap 中的列应该相互粘连，为了留出余量，您只能使用 .col没有数字，并最终添加 -lg断点:

示例车削:<div class="col-lg-4 cmsInterface" id="cms2" align="center">进入 <div class="col-lg cmsInterface" id="cms2" align="center" >

.cmsInterface {
  background: yellow;
  margin: 1em;
  padding: 1em;
  padding-top: 5em;
  padding-bottom: 5em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">

    <div class="col-lg cmsInterface" id="cms1" align="center">
      <h5><a href=""><i class="fas fa-chevron-right"></i> Create/Edit a News Article <i class="far fa-edit"></i></a></h5>
    </div>

    <div class="col-lg  cmsInterface" id="cms2" align="center">
      <h5><a href="eventportal.php"><i class="fas fa-chevron-right"></i> Create/Edit an Event <i class="far fa-calendar-times"></i></a></h5>
    </div>

    <div class="col-lg  cmsInterface" id="cms3" align="center">
      <h5><a href="staffportal.php"><i class="fas fa-chevron-right"></i> Add/Edit Staff <i class="fas fa-user-alt"></i></a></h5>
    </div>

  </div>
</div>

演示: https://codepen.io/gc-nomade/pen/OJPrOqW