html - Bootstrap 3 嵌套网格忽略父项？

Question

我有一个由两部分组成的表格。第一部分，标签为 col-sm-2，输入为 col-sm-8。

第二部分，我想在右边做表格和一些帮助文本。所以我制作了标签 col-sm-2 并输入了 col-sm-6。

然后我有一个带有 col-sm-4 pull-right 的 ul，但是它不会 float 在表单的右边。

<div class="container">
  <form class="form-horizontal col-sm-12" role="form">

    <div class="form-group">
      <label class="control-label col-sm-2">Input</label>
      <div class="col-sm-8">
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Input 2</label>
      <div class="col-sm-6">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Input 3</label>
      <div class="col-sm-6">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-sm-4 pull-right">
      <ul>
        <li>list item 1 that causes the column to wrap</li>
        <li>list item 2</li>
      </ul>
    </div>
  </form>
</div>

<!-- /.container -->

如何让列表在这个 bootply 中 float 到“输入 2”和“输入 3”的右侧？

Answer 1

试试这个:

<div class="container">
  <form class="form-horizontal col-sm-12" role="form">
    <div class="form-group row">
        <label label-default="" class="control-label col-sm-2">Input</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-8">
            <div class="form-group  row">
                <label label-default="" class="control-label col-sm-3">Input 2</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="form-group row">
                <label label-default="" class="control-label col-sm-3">Input 3</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <ul>
                <li>list item 1 that causes the column to wrap</li>
                <li>list item 2</li>
            </ul>
        </div>
    </div>
  </form>
</div>

运行演示:http://www.bootply.com/FzN9FtUTXu#