我有一系列的Bootstrap行,我想知道是否有任何方法可以用短行“链接”列中的内容以表明它们是相关的?当前的外观如下:html - 短线链接两个Bootstrap列的内容-LMLPHP

这就是我想要的样子:html - 短线链接两个Bootstrap列的内容-LMLPHP

这是现有代码的示例。我确定(我希望)可以通过使用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>

09-17 18:58
查看更多