使用引导程序输入宽度和按钮宽度答案

【问题标题】：input width and button width with bootstrap使用引导程序输入宽度和按钮宽度
【发布时间】：2014-04-11 23:39:19
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

http://jsfiddle.net/SXus5/

【讨论】：

这几乎完全符合我的要求。还有一件事：按钮应该一直在右边，输入在主容器的左边，这样它们的两边就和我添加到小提琴的线对齐了。他们之间的差距也应该更小。不过谢谢！
我使用padding-left:0px 输入和padding-right:0px 按钮解决了这个问题，并且使用@media css 移动视图现在也可以了。感谢您的意见！
很高兴你知道了。干杯！

【解决方案2】：

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

这是您的 jsfiddle 的修改版本，其输入、按钮和线条的宽度都相同。

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

【讨论】：

您似乎添加了我的链接，而不是您更新的 jsfiddle。并且按钮只能在“xs”设备上具有容器的全宽。