时间戳

首页 > 解决方案 > 选择元素的宽度不是 silbling、bootstrap 间距过冲

html - 选择元素的宽度不是 silbling、bootstrap 间距过冲

问题描述

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

当我对这两个字段使用 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。

谢谢你。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

默认 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

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

但您也可以将 s 换成.rows .form-row，如docs 中所述：

您也可以换成.row标准.form-row网格行的变体，它覆盖了默认的列间距，以获得更紧凑和更紧凑的布局。

在这里看到它。

推荐阅读