引导网格超出宽度

Question

由于某种原因，我不明白 3 列网格系统超出了我的 100% 宽度。

代码

<div class="row" style="border: 1px solid red">
    <div class="add_promo col-12 col-md-offset-0 col-xs-12 col-xs-offset-0"> 
        <input type="text" placeholder="ingresar código..." class=" col-md-6 col-md-offset-0 col-xs-6 col-xs-offset-0" />
        <button type="" class="btn btn-default btn-lg btn-success col-3 col-md-offset-0 col-xs-3 col-xs-offset-0" >Enviar</button>
        <button type="" class="btn btn-default btn-lg btn-danger col-md-3 col-md-offset-0 col-xs-3 col-xs-offset-0">Cancelar</button>
    </div>
</div>

小提琴：https://jsfiddle.net/DTcHh/12328/

谢谢

Answer 1

在引导程序中，每个列元素都有padding-left 和padding-right，用于在列之间创建“排水沟”。但是，这意味着在第一列的左侧和最后一列的右侧创建了一个装订线。因为人们经常有嵌套的行，这几乎总是希望外边缘与父容器齐平，引导程序中的.row 类具有负的margin-left 和margin-right 属性，等于列间距宽度。这会将行的外侧向外拉，使外部排水沟位于容器元素的外部。

这就是您在这里所经历的...您的 .row 元素正在将内容拉到父元素之外。为了解决这个问题，bootstrap 还提供了另一个类，它被构建为用作容纳网格系统的主要外部容器，并且用于容纳 .row 元素。

它被恰当地命名为.container

您可以在这里阅读更多内容：

http://getbootstrap.com/css/#overview-container

这是您的 Fiddle 的更新版本，用于演示：

https://jsfiddle.net/DTcHh/12329/

---

附带说明，如果您不想在主父元素上使用外部排水沟，您可以放弃 .container 元素，只需将 <div class="row" ... 更改为 <div class="clearfix" ...

.row 和.clearfix 执行几乎相同的功能（保持浮动元素 - 列，在行的情况下 - 不从页面流中删除它们），.row 的主要区别是负外边距。