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/

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

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>

twitter bootstrap select 掩盖了它的一些标签

twitter bootstrap select covers up some of it's label

html

css

twitter-bootstrap