Bootstrap 列不适用于宽度调整

Question

我想显示两个并排的输入区域，其中一个比另一个占用的空间少 space。这就是我现在拥有的，但不知何故它不起作用。

 <div class="row">
        <div class="input-group input-group-sm mb-3 fitContent col-xs-8">
            <span class="input-group-text">Reihentitel</span>
            <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
        <div class="input-group input-group-sm mb-3 fitContent col-xs-4">
            <span class="input-group-text">Bandaufführung</span>
            <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>

当我只使用 .col class 时，它会在屏幕上均匀地分割两个 div 标签。例如，对于 .col-xs-8 和 .col-xs-4，它显示在另一个下方。

现在我将输入组放入另一个 div 中，它有 .col class 但它和以前一样。

<div class="row">
    <div class="col-xs-8">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Reihentitel</span>
          <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Bandaufführung</span>
          <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>
</div>

Answer 1

当您 read the documentation 时，您会发现最小的列不再需要任何前缀。这是因为这是默认宽度，您不需要任何前缀作为默认值。

换句话说：col-xs-4 变成 col-4（因为它在所有尺寸上都是 4 宽度，而不仅仅是 xs）

我从评论中得到的关于不要将 column-classes 与其他类混用的建议仍然是我强烈推荐的。如果不这样做，很容易覆盖列样式并破坏布局。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row">
    <div class="col-8">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Reihentitel</span>
          <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
    </div>
    <div class="col-4">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Bandaufführung</span>
          <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>
</div>

Bootstrap 列不适用于宽度调整

Bootstrap columns not working with width adjustment

html

bootstrap-4