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，我在页面上添加了一行作为参考，以显示输入应该在左侧的位置。当您将小提琴窗口缩小时，按钮会在输入下方达到一个完整的长度，但输入仍然在两侧都有间隙。

Answer 1

这是因为列类用于包装元素并赋予它们结构。如果你给你的按钮这些类，它将赋予该元素全宽而不是典型的填充。

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

http://jsfiddle.net/SXus5/

Answer 2

如果您希望按钮是容器的整个宽度，只需添加类'btn-block'即可。表单组内的任何输入都将自动扩展以填充其容器。而不是将.col类添加到表单组，而是将其添加到表单包含在div中。

以下是jsfiddle的修改版本，输入，按钮和线宽度相同。

<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>

输入宽度和按钮宽度与引导程序

2 个答案: