html - twitter bootstrap select 覆盖了它的一些标签

Question

我的代码:

<div class="form-inline">
    <div class="form-group">
        <label class="control-label col-sm-2" for="demo">Options: </label>
        <div class="col-sm-8">
            <select class="form-control" name="demo">
                <option value="all">View All</option>
            </select>
        </div>
    </div>
</div>

演示:

http://jsfiddle.net/Wy22s/408/

问题是下拉菜单部分覆盖了“选项:”标签。解决此问题的最佳方法是什么？

Answer 1

我会像这样使用 Bootstrap 3 的网格系统:

<form method="POST">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2">
        <label>Option:</label>
      </div>
      <div class="col-xs-10">
        <select class="form-control input-sm">
          <option value=""></option>
          <option value="1">One</option>
          <option value="2">Two</option>
        </select>
      </div>
    </div>
  </div>
</form>

如果您想内联添加更多元素，只需更改 col-xs-*到别的东西。例如，2 个元素看起来像这样:

<div class="col-xs-2">
  <label>Option One:</label>
</div>
<div class="col-xs-4">
  <select class="form-control input-sm">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>
<div class="col-xs-2">
  <label>Option Two:</label>
</div>
<div class="col-xs-4">
  <select class="form-control input-sm">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

只要你的col-xs-*类在一行中加起来为 12，所有内容都会在同一行上正确显示。注意，您可以关闭一行的 <div>提早标记，即它不必等于 12，但不能超过 12。

希望对您有所帮助!

并查看此 Bootply 示例以查看现场演示:

Bootply