Question

我正在使用bootstrap 3作为我的布局，试图在div的底部显示一个边框：

<div class="row small headerheight borderbottom hidden-xs">
    <div class="col-md-8 headerheight vcenteritems paditems">Items</div>
    <div class="col-md-2 headerheight vcenteritems light-grey hcenteritems borderright">One-off</div>
    <div class="col-md-2 headerheight vcenteritems light-grey hcenteritems">Monthly</div>
</div>

borderbottom仅显示第一列的边框：

.borderbottom
{
  border-bottom: solid 1px #b3b3b3 ;
}

如何为一次关闭和每月列显示边框？

Codepen here

Answer 1

您可以将边框设置为div内的任何.borderbottom：

.borderbottom div
{
    border-bottom: solid 1px #b3b3b3 ;
}

Answer 2

我刚刚与我们的团队进行了同样的讨论。除非你绝对需要，否则不要设置height。记住这一点。你没有看到的是灰色框覆盖了边界，实际上是跨越整个宽度。发生这种情况的原因是因为灰盒子在他们不需要的时候设置了固定的高度。再次：

除非绝对没有办法，否则不要设置height的东西。

相反，让padding-top，padding-bottom，font-size和line-height确定高度。玩这些数字，直到达到令人满意的高度。

我发现20px的填充顶部和底部完成了技巧（以及移除60px固定高度）。这是一个基本的例子：

<div class="header-row">
    <div>Items</div>
    <div>One-off</div>
    <div>Monthly</div>
</div>

.header-row > * {
  padding-top: 20px;
  padding-bottom: 20px;
}

如何显示与CSS的边界？

2 个答案: