如何使用 Bootstrap 获得此列布局？

Question

我正在努力使用 Bootstrap 列来获得特定的列宽。

https://www.codeply.com/p/SSBBdBMXNc:

从上面，我想保持标签列宽，但文本框列需要一直延伸到最后。

更新：
更清楚一点：

简单地从第 5 列切换到第 12 列也会增加标签的宽度：

Answer 1

给你...

如果要实现此目的，您需要将 <div class="col-lg-5"> 更改为 <div class="col-lg-12">。您可能会感到困惑，因为 4 列 + 8 列 = 12 列，但这两个元素不会占用 full-window 宽度，因为它们受到 <div class="col-lg-5">.

的限制

更新

HTML:

<br />
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2" id="label">label</div>
        <div class="col-lg" id="textbox">textbox</div>
    </div>
</div>
<br />

CSS:

div:not(.row) {
    border: 1px solid red;
}

@media only screen and (min-width: 1200px) {
    #label {
        width: 13vw;
    }
}

Answer 2

您已添加 class="col-lg-5"

你应该尝试这样的事情：

<div class="col-lg-12">
        <div class="row">
            <div class="col-lg-4">label</div>
            <div class="col-lg-8">textbox</div>
        </div>
    </div>

Answer 3

如果你愿意，你可以完全删除第一个 col 和第二个 row，就像这样。

  <div class="row">
      <div class="col-lg-4">label</div>
      <div class="col-lg-8">textbox</div>
  </div>

您也可以将所有内容放在 container 中以很好地完成它.....值得注意的是，如果您使用 container-fluid 而不是全屏宽度比屏幕居中的更薄的容器。如果您根本不使用容器，上面的所有内容都将位于屏幕的边缘。

<div class="container">
   <div class="row">
      <div class="col-lg-4">label</div>
      <div class="col-lg-8">textbox</div>
   </div>
</div>

Answer 4

我最终创建了自己的自定义类以达到我需要的宽度。

相对于 bootstrap 列布局 1 - 12，我需要的宽度为 1.6644 和 10.3356。

.col-1_6644,
.col-10_3356 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1_6644 {
    width: 13.87%;
}

.col-10_3356 {
    width: 86.13%;
}

https://codeply.com/p/SSBBdBMXNc

如何使用 Bootstrap 获得此列布局？

How can I get this column layout using Bootstrap?

html

css

twitter-bootstrap

bootstrap-4

更新