Question

我有两份表格。第一部分，标签是col-sm-2，输入是col-sm-8。

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

然后我有一个ul-col-sm-4 pull-right，但是它不会浮动在窗体右边。

＆＃13;

<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>

＆＃13;

<!-- /.container -->

如何让列表浮动到＆＃34;输入2＆＃34; ＆安培; ＆＃34;输入3＆＃34;在这个bootply？

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#

Answer 2

请尝试使用以下结构：

<div class="form-group row">
  <label 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="form-group col-sm-8">
        <div class="row">
            <label class="control-label col-sm-3">Input 2</label>
            <div class="col-sm-9">
                <input type="text" class="form-control">
              </div>
        </div>
        <div class="row">
            <label 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>

使用bootstrap＆＃39; row＆＃39;包装你的列，如果你完成一行中所涵盖的列的计数，那将是很好的。 [如上面的片段＆＃34; 8 + 4＆＃34;，＆＃34; 10 + 2＆＃34;，＆＃34; 3 + 9＆＃34;]。这将有助于正确对齐列，但这完全取决于要求。

bootstrap 3嵌套网格忽略父级？

2 个答案: