2つのブートストラップ列の内容を結んだ短い行

Question

一連のブートストラップ行がありますが、列の内容を短い行で「リンク」する方法があるのだろうか？これは、現在、どのように見えるかです：

をそして、これは私がそれを見てみたい方法です：

これは、既存のコードのサンプルです。私は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> 

Answer 1

はい、: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>

：列の間にブートストラップパディングは常に同じであるので

は、あなただけのいくつかの固定幅を持つ要素と所望の位置に配置することができます