将引导程序选择框的形式移动到页面左侧

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.希望它会帮助你。