css - Bootstrap 宽一列宽度但仅适用于大屏幕

Question

我正在按照 bootstrap 文档使一列比其他 2 列宽。 问题底部的 JSFiddle。

https://getbootstrap.com/docs/4.3/layout/grid/#setting-one-column-width

我想用 3 列创建这个长度仅适用于大型设备:

当我尝试时:

<div class="row no-lf-margin">
    <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 bg-warning">
        1
    </div>
    <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 bg-danger">
        2
    </div>
    <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 bg-secondary">
        3
    </div>
</div>

我明白了:

但第一个列(第 1 列，橙色)占用的空间比它需要的要多一些，第 3 列(灰色)也占用了太多空间。当我将 col-xl-2 设置为 col1 时，它占用的空间太小，当我将 col-xl-1 设置为 col3 时，它占用的空间也太小。就像我需要 col-xl-2.5 用于 col1，而 col-xl-1.5 用于 col3。

注意:其他屏幕(md、small 等)工作正常，由于 col-md-12 和 col-sm-12，它们相互堆叠。

---

所以我根据文档创建了这个:

<div class="row no-lf-margin">
      <div class="col bg-warning">
         1
      </div>
      <div class="col-7 bg-danger">
        2
      </div>
      <div class="col bg-secondary">
        3
      </div>
</div>

col1(橙色)的结果很好，宽度也不错。但是 col3(灰色)还是太大了。同样现在在所有屏幕上，cols 彼此相邻，而不是在另一个下面，因为没有 col-md-12 和 col-sm-12:

我尝试创建这两者的混合体:

  <div class="row no-lf-margin">
    <div class="col col-md-12 col-sm-12 bg-warning">
        1
    </div>
    <div class="col-7 col-md-12 col-sm-12 bg-danger">
        2
    </div>
    <div class="col col-md-12 col-sm-12 bg-secondary">
        3
    </div>
</div>

但我到处都是 col-12，它们相互堆叠。

---

同时具有版本和目标的 JSFiddle:https://jsfiddle.net/gcdn3str/

Answer 1

在 .row 中，bootstrap 中的 .col 必须始终加起来为 12。因此，如果您有 2 个 col-6 , 它们的大小相同，占 50%。因此，在您的情况下，如果您有 3 个 col-4，它们将全部占据页面的 1/3。如果你想要一些比其他的更大，你可以这样做:col-4 col-5 col-3 或者其他一些组合，加起来是 12。

例如:

<div class="row">
    <div class="col-md-4">
        1
    </div>
    <div class="col-md-5">
        2
    </div>
    <div class="col-md-3">
        3
    </div>
</div>

在一列中，您可以将另一行与列放在一起，这样您就可以调整它们的大小。例如，如果第一列没问题，但其他 2 列需要调整，您可以这样做:

<div class="row">
    <div class="col-md-4">
        1
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-7">
            2
            </div>
            <div class="col-md-5">
            3
            </div>
        </div>
    </div>
</div>

试一试，看看你是否可以钻一个适合你的情况!