我正在尝试使用这段html / css https://gist.github.com/ezersky/1484d936fd714f83074c作为行分隔符。然而;当我试图摆脱一个色谱柱并将其作为2并且25%/ 75%分裂时,它会出现故障并使其低于它并且分线器消失。另外,如何让线分割器不像现在那样靠近顶部,我希望顶部有一个间隙。
提前致谢。
答案 0 :(得分:0)
以下是代码笔链接:http://codepen.io/saa93/pen/BQNBXB
我使用了你发布的同一段代码,删除了一列,使其成为col-sm-3(25%)和col-sm-9(75%)行。分隔符仍然适用于屏幕尺寸最小值:768像素。
希望这会有所帮助。
Html:
<div class="container">
<div class="page-header">
<h3>Add the (.grid-divider) class to any row to separate grid columns with equal height lines.</h3>
</div>
<div class="row grid-divider">
<div class="col-sm-3">
<div class="col-padding">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p>
</div>
</div>
<div class="col-sm-9">
<div class="col-padding">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p>
</div>
</div>
</div>
</div>
CSS:
/* Tablet and bigger */
@media ( min-width: 768px ) {
.grid-divider {
position: relative;
padding: 0;
}
.grid-divider>[class*='col-'] {
position: static;
}
.grid-divider>[class*='col-']:nth-child(n+2):before {
content: "";
border-left: 1px solid #DDD;
position: absolute;
top: 0;
bottom: 0;
}
.col-padding {
padding: 0 15px;
}
}