自举宽一栏，但仅在大屏幕上

2024-04-29 • 问答

我正在遵循引导程序文档，以使一列比另一列宽。 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时，占用的空间也太少。就像我需要col1的col-xl-2.5和col3的col-xl-1.5一样。

注意：其他屏幕（md，小屏幕等）工作正常，由于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（灰色）仍然太大。现在在所有屏幕上，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>

但是我到处都是col-12，它们彼此堆叠。

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

使用此代码：

.item
    {
        padding: 2rem;
    }
    
    .orange
    {
        background-color: orange;
    }

    .red
    {
        background-color: red;
    }

    .gray
    {
        background-color: gray;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
        <div class="row no-gutters">
            <div class="item col-12 col-lg-3 orange"></div>
            <div class="item col-12 col-lg-8 red"></div>
            <div class="item col-12 col-lg-1 gray"></div>
        </div>
    </div>

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

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

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

试一试，看看是否可以发现适合自己的情况！

自举宽一栏，但仅在大屏幕上

smithhyj 回答：自举宽一栏，但仅在大屏幕上

大家都在问