css - 自举网格超出宽度

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>

fiddle :https://jsfiddle.net/DTcHh/12328/

谢谢

Answer 1

在 bootstrap 中，每个列元素都有 padding-left和 padding-right用于在列之间创建“装订线”。但是，这意味着在第一列的左侧和最后一列的右侧创建了一个装订线。因为人们经常有嵌套的行，这几乎总是希望外边缘与父容器齐平, .row Bootstrap 中的类有负数 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执行大部分相同的功能(保持 float 元素 - 列，在行的情况下 - 没有将它们从页面流中删除)，.row 的主要区别是负外边距。