css - 使用 Bootstrap 将选择和输入框组合成一行

Question

如何仅使用 Bootstrap 框架将所有表单组项(例如选择项、输入项)组合在一起？

我已经尝试了下面的方法，但正如预期的那样，我在选择和输入框之间得到了空间

DEMO

Answer 1

问题是你的声明 mx-sm-3 .这适用于 -sm如果没有其他声明，则断点和更大。更正此问题的最简单方法是在较大的断点处添加一个重置:mx-md-0 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="form-inline">
    <div class="form-group">
      <select class="custom-select mx-md-0">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <input class="form-control" type="text">
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

展开上面的代码片段，看看当您超过 -sm 时它将如何呈现。断点。我也改变了你的<select>利用 custom-select类。