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/

问题是下拉菜单部分涵盖了＆＃34;选项：＆＃34;标签。解决这个问题的最佳方法是什么？

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

Answer 2

<form class="form-horizontal">

展开结果以查看其呈现方式：http://jsfiddle.net/Wy22s/412/

HTML：

<form class="form-horizontal">
<fieldset>

<div class="form-group">
  <label class="col-md-4 control-label" for="Options">Options</label>
  <div class="col-md-4">
    <select id="Options" name="Options" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="Options 2">Options 2</label>
  <div class="col-md-4">
    <select id="Options 2" name="Options 2" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

</fieldset>
</form>