Bootstrap形式行宽

Question

我正在尝试构建一个如下所示的表单： JSFIDDLE

问题是该行比实际内容宽得多，因此容器会拉得很多。

任何人都知道如何将行宽减少到实际内容？

<div class="container" style="border: 1px solid black">
  <h2>Vertical (basic) form</h2>
  <form class="">

    <div class="form-group row">
      <div class="col-sm-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="col-sm-3">
        <input type="passord" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-6">
         <textarea class="form-control" cols="5" maxLength="500" />
      </div>
    </div>




  </form>
</div>

Answer 1

Try this resizable fiddle，当您使视口更宽时，input应保留在其列大小而不填充整个视口行。

编辑：.col课程将被限制（如果您不希望边框占用所有12列，与.container课程一样），.container将始终占据完整的12列网格。

如下图所示，您使用的是6列（网格的一半），因此另外6个col元素可以向右移动，这就是为什么如果您将.container边界，它将会始终显示所有12列width。