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

如何獲得“地圖”按鈕與選擇下拉列表對齊？

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

我只是想通了。 問題是我有一些通用代碼，這些代碼會在選擇文本框上方輸出無序的可能形式錯誤的列表。 問題是，如果沒有錯誤，將仍然生成用於創建無序列表的代碼，但是該列表將為空。 這將導致間隔不足。

有關具體示例，請參見此代碼 。

我要做的只是在創建該無序列表之前先檢查是否有錯誤。 因此，除非有錯誤，否則無序列表將不會出現。

感謝大家的幫助！