css - Bootstrap 表单行宽

Question

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

问题是该行比实际内容宽得多，因此容器被拉伸(stretch)得太多了。

有人知道如何将行宽缩小到实际内容吗？

<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 ，当您使视口(viewport)变宽时，input 应保持其列大小，而不会填满整个视口(viewport)行。

编辑:.col 类将被加边框(如果您不希望边框像 .container 类一样占据所有 12 列)，。 container 将始终占据完整的 12 列网格。

如下图所示，您使用了 6 列(网格的一半)，所以另外 6 个 col 元素可以放在正确的位置，这就是为什么如果您将 .container 加边框，它将始终显示所有 12 列宽度。