使用 Bootstrap 的 form-horizontal 时如何对齐表单元素？答案

【问题标题】：How can I align form elements when using Bootstrap's form-horizontal?使用 Bootstrap 的 form-horizontal 时如何对齐表单元素？
【发布时间】：2014-02-26 21:42:30
【问题描述】：

我在将选择下拉菜单和按钮与 Bootstrap 对齐时遇到问题。这是一张图片：

以下是代码，或多或少：

<form class="form-horizontal" action="." method="GET" role="form">
    <div class="form-group">
        <label class="col-lg-4 control-label" for="id_location">Location</label>
        <div class="col-lg-6">
            {% render_field form.location class='form-control' data-size='10' %}
        </div>
        <div class="col-lg-2">
            <button class="btn btn-default" type="button" data-toggle="modal" data-target="#map_modal">Map</button>
        </div>
    </div>
</form>

如何让地图按钮与选择下拉菜单对齐？

【问题讨论】：

似乎适用于基本 BS CSS (bootply.com/117059)。您可以检查是否有边距应用于您的元素或容器之一。

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果你改变你的标记可以吗？如果是，那么试试这个。

Bootply

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="control" >Location</label>
    <select class="form-control">
      <option>Option 1</option>
    </select>
  </div>
  <button class="btn btn-default">Map</button>
</form>

【讨论】：

中肯的建议，但我最终弄明白了。由于我犯了一个小错误，间距被丢弃了。

【解决方案2】：

我刚刚想通了。问题是我有一些通用代码在选择文本框上方输出可能的表单错误的无序列表。问题是，如果没有错误，仍然会生成创建无序列表的代码，但该列表将为空。这会消除间距。

具体示例请参见this code。

我所要做的就是在创建无序列表之前先检查是否有错误。所以现在，除非有错误，否则无序列表不会出现。

感谢大家的帮助！

【讨论】：