自举列的底部边界由于行的负边缘和列的填充而走到列的外部

我想向引导列添加底部边框，但由于行的负边距而出现在列的div之外，引导列的填充。请看下面：自举列的底部边界由于行的负边缘和列的填充而走到列的外部

有没有什么办法可以防止边界从外出和只在列的内容显示出来，如下面？

<div class="container"> 
    <div class="row"> 

    <div class="col-md-12 add-border"> 
     A quick brown fox jumps over the lazy dog. 
    </div> 

    </div> 
</div>

来源

2016-07-15 Rishabh

在我看来，它更好地保留默认的TB网格样式，因为它是。你可以用一个过度的换行来达到这个目的，即'

A quick brown fox jumps over the lazy dog.

' –

@MuhammadUsman这实际上是一个非常好的理想的方式。这将防止引导类的不必要的修改。 – Rishabh

应用填充：0您的div你想拥有的边界（以下假定3px的边框宽度 - 更改，以适应）：

.add-border{ 
    padding:0; 
    border-bottom:3px solid #000; 
}

如果你只想影响填充到左侧和右侧（但不是顶部和底部），那么你可以使用以下内容：

.add-border{ 
    padding-left:0; 
    padding-right:0; 
    border-bottom:3px solid #000; 
}

来源

2016-07-15 07:08:27 gavgrif

为什么在最后使用分号？ –

对不起 - 习惯的力量 - 回答修正 – gavgrif

尝试此操作并使用after伪元素设置边框。

.add-border:after { 
    content:''; 
    width:270px; 
    height:5px; 
    background:black; 
    position:absolute; 
    left:13px; 
    top:24px; 
}

来源

2016-07-15 07:12:23 frnt

我认为在需要边框的div中应用padding：0是@gavgrif建议的简单解决方案。 – Rishabh

@Rishabh是的，你可以尝试这两种解决方案。我认为你需要优化你的边框，如果是这样的话。并且是填充：0组的位置为0，但边框底部覆盖了x轴上的整页。 – frnt

自举列的底部边界由于行的负边缘和列的填充而走到列的外部

回答

相关问题