移动引导程序选择器框窗体以与页面左侧对齐

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>

你也可以检查这个小提琴。希望对您有所帮助。