html - 选择元素有其他宽度而不是 silbling，bootstrap 间距过冲

Question

我正在使用 bootstrap-4 设计一个输入表单。我有一个输入字段和一个选择字段。两者都有类 col，但间距类不同，但选择字段有点小。

当我对两个字段使用类 col-6 时，它们具有相同的长度，但我无法创建间距，而这是我的情况所需要的。当我添加间距时，其中一个元素只是移动到下一行。

JS-Fiddle:https://jsfiddle.net/p81z7Lfg/1/

<div class="container">
  <div class="row">
    <input type="text" class="col mr-1" value="1">
    <input type="text" class="col ml-1" value="2">
  </div>

  <div class="row">
    <input type="text" class="col mr-1" value="3">
    <select class="col ml-1">
      <option selected>4</option>
    </select>
  </div>

  <div class="row"></div>

  <div class="row">
    <input type="text" class="col mr-1" value="1">
    <input type="text" class="col ml-1" value="2">
  </div>

  <div class="row">
    <input type="text" class="col-6 mr-1" value="3">
    <select class="col-6 ml-1">
      <option selected>4</option>
    </select>
  </div>
</div>

bootstrap 解决方案真的很好，因为元素样式和编码一致，我不想在 bootstrap 中间使用自己的 css。

谢谢。

Answer 1

默认的 Bootstrap v4 表单标记:

div.row 
  div.col
    input.form-control
  div.col
    input.form-control
div.row
  div.col
    select.form-control
      option
      option
      ...
  div.col
    any-other-form-element.form-control

显然，您可以根据您希望它们在各种屏幕宽度下的显示方式，将 .col 替换为任何其他 .col-*-*。

但您也可以将 .row 换成 .form-row，如 stated in docs :

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

查看here .