选择元素具有除淤泥、自举间距过冲以外的其他宽度

Question

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

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

JS-小提琴：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>

引导解决方案会非常好，因为项目一致的样式和编码，我不想在引导过程中使用自己的 css。

谢谢。

Answer 1

默认引导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-*-*。

但您也可以将.rows 换成.form-rows，如文档中所述：

您也可以将.row换成.form-row，这是我们标准网格行的一种变体，它覆盖了默认的列装订线以获得更紧凑、更紧凑的布局。

在这里看到它。