如何设置Bootstrap 4相对于父div的列宽

Question

我正在使用 Bootstrap 4，并尝试创建一个简单的布局。两列，分为9列和3列。第一列内只是文本。但我需要 1 列的填充。不是包含 div 的 1 列，而是整个页面的一列。这是一个例子

我下面的代码显然不起作用。 1 列填充是包含 div 的 1 列。

.left-box {
    background: lightgray;
    text-align: justify;
}

.right-box {
    background: darkgray;
    height: 100px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-9">
            <div class="left-box py-1">
                <div class="col-10 offset-1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec volutpat sapien. Suspendisse erat ex, condimentum et faucibus et, ornare in elit. Mauris eget lacinia sapien. Proin eu porttitor odio.</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="right-box"></div>
        </div>
    </div>
</div>

这给出了以下结果，其中填充不正确。

有没有办法实现正确的填充？

Answer 1

您可以计算必要的左内边距，

calc(8.333% + 15px)

- 100% / 12 列给我们 8.333%，加上 15px 列间距。

.left-box {
    background: lightgray;
    text-align: justify;
    padding-left: calc(8.333% + 15px) !important;
}

.right-box {
    background: darkgray;
    height: 100px;
}

.test .col-1 { height: 1em; outline: 1px solid red; }


.test .col-1 div { outline: 1px solid blue; }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row test">
    <div class="col-1"></div>
    <div class="col-1"><div>
    foo
    </div></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <div class="col-1"></div>
  </div>
  <div class="row">
    <div class="col-9 left-box" style="background:#ccc">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec volutpat sapien. Suspendisse erat ex, condimentum et faucibus et, ornare in elit. Mauris eget lacinia sapien. Proin eu porttitor odio.</p>
    </div>
    <div class="col-3">
      <div class="right-box"></div>
    </div>
  </div>
</div>