html - 在bootstrap中自动调整列宽

Question

我不太擅长设计，而且我有一个设计问题拖了我好几个小时。如果有人可以帮助我，那将不胜感激。

我有一个 div 和一个 .container 类，在里面，我们有三个 div。一个是 .col-md-3 类，另一个是 .col-md-6 类，第三个是 .col-md-3。第三列根本不应该在那里。在某些情况下，只有第一个和第二个 div 会在那里。

如果第二个 div 不存在，我们可以让第三个占据空间吗？ bootstrap 中是否有任何方法可以做到这一点。

请帮帮我。

Answer 1

您可以使用 col 类到 div。如果从 row

中删除一个 div，它会自动调整

检查 https://getbootstrap.com/docs/4.1/layout/grid/#equal-width了解更多信息

.col {
  background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

您可以通过从行中删除一列来进行检查