將引導程序選擇框的形式移動到頁面左側

Question

我使用引導程序cdn，並使用下面的表單創建一個下拉框。奇怪的是，圖例標記正確對齊頁面的左側，但是選擇框在頁面上向着中心稍微縮進。如何將選擇框移動到頁面左側，使其與圖例標記對齊？

<form class="form-horizontal" action="{{ url_for('db_selected') }}" name="Item_1" method="POST"> 
    <fieldset> 
    <legend>Select a Database</legend> 
    <div class="form-group"> 
    <label for="select" class="col-lg-2 control-label">Database:</label> 
    <select id="DB" class="form-control" name="Item_4" style="width: 70%" > 
     <option></option> 
     {% for item in coll_name %} 
      <option value="{{item}}">{{item}}</option> 
     {% endfor %} 
    </select> 
    <br> 
</div> 
<div class="form-group"> 
    <div class="col-sm-10 col-lg-offset-2"> 
    <button type="submit" class="btn btn-success">Submit</button> 
    </div> 
</div> 
</fieldset> 
</form> 

Answer 1

我已經添加了您的代碼的示例輸出。所以，請檢查更新後的DOM還增加了一些css。

select#DB { 
 
    display: inline-block; 
 
} 
 
.control-label{ 
 
    text-align: left; 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="fluid-container"> 
 
    <form class="" action="{{ url_for('db_selected') }}" name="Item_1" method="POST"> 
 
     <fieldset> 
 
     <legend>Select a Database</legend>  
 
     <div class="form-group"> 
 
     <label for="select" class="control-label">Database:</label> 
 
     <select id="DB" class="form-control" name="Item_4" style="width: 70%" > 
 
      <option></option> 
 
      <option value="item">item</option> 
 
      <option value="item">item</option> 
 
      <option value="item">item</option> 
 
     </select> 
 
     <br> 
 
    </div> 
 
    <div class="form-group"> 
 
     <button type="submit" class="btn btn-success">Submit</button> 
 
    </div> 
 
    </fieldset> 
 
    </form> 
 
</div>

您還可以檢查此Fiddle.希望它會幫助你。