html - 使用 Bootstrap 输入宽度和按钮宽度

Question

我有一个带有输入和按钮的表单，样式为 bootstrap 。 我使用网格列为输入和按钮提供自己的宽度。

但它似乎改变了输入的宽度，我必须将 col-* 类分配给输入周围的 div，而按钮可以自行接收该类。

这最终导致输入不使用我希望提供的宽度。

<div class="container">
    <div class="row">
      <form name="search" role="search">
        <div class="form-group col-sm-10 col-xs-12">
            <input type="text" class="form-control input-lg" placeholder="Hey"/>
        </div>
        <div class="form-group">
          <button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
            Search
          </button>
        </div>
      </form>
    </div>
</div>

这是一个jsfiddle我在页面上添加了一行作为引用，以显示输入应该在左侧的位置。当您缩小 fiddle 窗口时，按钮会进入输入下方并达到完整长度，但输入两侧仍然有间隙。

Answer 1

这是因为列类旨在包装元素并赋予它们结构。如果您为按钮提供这些类，它将为该元素提供完整宽度，而不是典型的填充。

我将列类移动到表单组上，并创建了一个名为 .btn-full 的简单类，它设置 width: 100%; 并且它实现了你想要的。

http://jsfiddle.net/SXus5/