Question

如何使用bootstrap框架将所有表单组项目（例如Select，Input items）组合在一起？

我尝试过以下方式，但正如预期的那样，我得到了Select和Input Box之间的空格

Answer 1

我不确定这是不是你所追求的，但如果不是，那就说明你再多一点，我可以帮助你。

如果您只是想将这些项目组合在一起，则bootstrap有一个card类，允许您将元素分组到各种容器中。下面的代码包含在bootstraps网格系统中。我已将您的代码放入带有div类的card标记中。在第二个示例中，我删除了inline表单类，以便您可以看到输入是如何垂直堆叠的。

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-inline">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是一个map，因此您可以看到布局。

Answer 2

问题在于您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类。

将“选择”和“输入”框与Boostrap组合在一起

2 个答案: