在使用Bootstrap的表格水平时，如何对齐表单元素？

Question

我在使用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>

如何让Map按钮与选择下拉列表对齐？

Answer 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>

Answer 2

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

有关具体示例，请参阅this code。

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

感谢大家的帮助！