Bootstrap 4，处理响应式 div

Question

我有 7 个 div。

因为 col 最多只能达到 12。

我不能使用 .col-md-2 类来平分所有。 所以，我使用 .col 类来平分所有。

现在要使其具有响应性，我需要在移动视图中将所有 div 宽度设置为 100%。

虽然 col-xs-12 可以工作，但如果我添加 class="col col-xs-12"，它就不能在同一个 div 上工作。另外，我不能使用class="col-md-2 col-xs-12"，因为我有 7 个 div，而 col-md-2 会破坏 1 个 div。

关于如何做的任何建议。

Answer 1

由于 Boostrap 4 具有移动优先的心态，因此您必须这样想。因此，首先声明默认类col-12，然后根据您的需要使用col-md 或col-lg 返回桌面。 在此处找到的 B4 文档中对此进行了更好的解释：https://getbootstrap.com/docs/4.3/layout/grid/

所以你的 div 看起来像 <div class="col-12 col-md"></div>。

希望这个答案有所帮助！

Answer 2

由于这个问题已经标注了答案，但我想我还是要澄清一些观点。

当您使用col-md（不带col-md-[1-12]）并打算拥有7 个相等的列时，Bootstrap 4 将默认使用flex-grow: 1;。这可能会导致您误解flex-grow: 1; 会将父宽度平均分为 7 个小等宽。如果任何 div 的内容的宽度大于列宽，这将无法正常工作。

当谈到弹性宽度时，有一个简单的公式要记住，它是：

content —> width —> flex-basis (由 max|min-width 限制)

有一篇很好的文章解释了这一点，你可以visit here看看这两者的区别。

回到你的例子，假设你有一个宽度为500px 的 div，现在所有 7 个 div 的宽度都不相同。在这种情况下，您应该明确定义自定义柱网。它看起来像这样：

<div class="container">
  <div class="row">
    <div class="col col-12 custom-col-7">Data</div>
    ...
  </div>
</div>

@media screen and (min-width: 768px) {
  .col.custom-col-7 {
    flex: 0 0 auto;
    width: calc(100%/7);
  }
}

我做了一个简单的例子来说明我的观点，希望对你有所帮助

.col {
  background: lightgreen;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .col.custom-col-7 {
    flex: 0 0 auto;
    width: calc(100%/7);
  }
}

.box {
  background: red;
  width: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Using `col-md`</h4>
<div class="container">
  <div class="row">
    <div class="col col-md col-12">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque officia, culpa, nemo numquam illum totam odio dolorem nisi ad in animi! Sequi illo voluptatem dolores.</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div>
    </div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id eaque iusto mollitia. Excepturi ea id cumque delectus facilis accusantium cum, ut itaque incidunt mollitia aspernatur, voluptates eligendi quibusdam iste facere sint soluta corporis et laborum porro, molestiae eaque sed molestias?</div>
  </div>
</div>

<h4>Using custom column class</h4>
<div class="container">
  <div class="row">
    <div class="col custom-col-7 col-12">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis inventore aspernatur architecto consectetur nostrum consequatur, esse amet molestias labore fuga quis reiciendis nulla reprehenderit assumenda?a</div>
    <div class="col custom-col-7 col-12">Col Data</div>
    <div class="col custom-col-7 col-12">Col Data</div>
    <div class="col custom-col-7 col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora, nam.</div>
    <div class="col custom-col-7 col-12"><div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div></div>
    <div class="col custom-col-7 col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eveniet, mollitia accusamus nam consequuntur velit.</div>
    <div class="col custom-col-7 col-12">Col Data</div>
  </div>
</div>