Css 引导一列宽，但仅在大屏幕上

我遵循引导文档，使一列比另两列宽。 在问题的底部打钩

我只想为大型设备创建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.
2.
3.

我明白了：

但是第一列（第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>

1.
2.
3.

结果对col1（橙色）是好的，宽度是好的。但col3（灰色）仍然太大。现在，在所有屏幕上，col彼此相邻，而不是在另一个屏幕上，因为没有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>

1.
2.
3.

但我发现到处都是col-12，它们堆叠在一起

---

---

jsiddle包含两个版本和目标：

在

.row

中，引导中的

.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>

1.
2.
3.

在一个列中，您可以将另一行与列放在一起，这样您就可以忽略它们的大小调整。例如，如果第一列很好，但其他两列需要调整，则可以执行以下操作：

<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>

1.
2.
3.

玩一玩，看看你是否能在一个适合你的情况下钻空子

使用以下代码：

.item
{
填充：2rem；
}
橙色
{
背景颜色：橙色；
}
红色
{
背景色：红色；
}
灰色
{
背景颜色：灰色；
}

如果你将1920/12除以160，它应该如何从160px的位重建204px、540px和1177px的列？您需要在这里创建自己的自定义类。列的宽度不必与图像中的完全相同。我只想让col1和col3的宽度变短，而不是像素@G-Cyruse

col md

与

lg

相同，为什么不分别为每列设置

col-3 col-7 col-2

？我知道这一点。我想要改变的是一个列的具体宽度，我想要一个更宽。因此，在您的示例中，假设我想将

col-md-4

的宽度缩小一点，将

col-md-5

的宽度扩大一点。将代码更改为

col-md-3

太短了。@IkePr进行了一次编辑，修复了您的问题，但是您需要稍微修改一下，以确保页面上没有水平滚动。页面上的所有行和列都应在