bootstrap网格超出宽度

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

在bootstrap中,每个列元素都有padding-left,padding-right并且用于在列之间创建"gutter".但是,这意味着在第一列的左侧和最后一列的右侧创建了一个装订线.因为人们经常有嵌套的行,这几乎总是希望外边缘与父容器齐平,.rowbootstrap中的类具有负数margin-left和margin-right属性,等于列gutter宽度.这将排的外侧向外拉,允许外部排水沟位于容器元件外部.

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

它恰当地命名 .container

你可以在这里阅读更多:

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

这是您的小提琴的更新版本,以演示:

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

作为旁注,如果您不想在主要父元素上使用外部阴沟,您可以放弃.container元素,只需将其更改<div class="row" ...为<div class="clearfix" ...

.row并.clearfix执行大部分相同的功能(保持浮动元素 - 列,在行的情况下 - 没有从页面流中删除),主要区别.row是负外边距.