我创建了一个jsFiddle 。我希望边框应该位于两条行线之间,但背景颜色应该像它在 js fiddle 中显示的那样。如何延长此列边框线。
我的 HTML
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
和CSS
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top:0 ;
}
我的 fiddle - https://jsfiddle.net/ff49tu79/13/
最佳答案
您可能想在单元格中使用填充而不是边距,并使用 flexbox 将 div 单元格 flex 在一起
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top: 0;
}
.flx {
display: flex;
}
.inner {
background: aliceblue;
border-right: 1px solid blue;
padding: 10px 15px;
}
.inner-end {
background: aliceblue;
padding: 10px 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
<div>1</div>
<div>2</div>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
</div>
关于html - bootstrap div 的行和列中的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42416763/