Question

我正在使用bootstrap 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.希望它能为您提供帮助。

移动bootstrap选择器框窗体以对齐页面左侧

1 个答案: