我有一系列的Bootstrap行,我想知道是否有任何方法可以用短行“链接”列中的内容以表明它们是相关的?当前的外观如下:
这就是我想要的样子:
这是现有代码的示例。我确定(我希望)可以通过使用info-div:before { some CSS }
来做到这一点,但我不确定是什么。
<div class="row">
<div class="col-sm-6">
<label>LAN IP</label>
<input type="text" class="form-control" v-model="location.lan_ip" />
</div>
<div class="col-sm-6 info-div">
<p class="field-info">If the first two octets of the device's LAN IP (as reported by Meraki) matches this value, the device will resolve to this location during Meraki import.</p>
</div>
</div>
最佳答案
是的,使用:before
。它必须设置content:
否则将不起作用(css是伪引导程序)。
由于列之间的引导填充总是相同的,因此您可以放置一些具有固定宽度和所需位置的元素:
* {
box-sizing: border-box;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
p {
margin: 0;
}
.col-sm-6 {
float: left;
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.row .wrapper {
position: relative;
background: #eee;
min-height: 100px;
}
.row .info-div:before {
content: '';
width: 30px;
position: absolute;
left: -30px;
top: 50%;
height: 1px;
background: black;
}
<div class="row">
<div class="col-sm-6">
<div class="wrapper">
<label>LAN IP</label>
<input type="text" class="form-control" v-model="location.lan_ip" />
</div>
</div>
<div class="col-sm-6">
<div class="wrapper info-div">
<p class="field-info">If the first two octets of the device's LAN IP (as reported by Meraki) matches this value, the device will resolve to this location during Meraki import.</p>
</div>
</div>
</div>