連接兩個Bootstrap列的短行

Question

我有一系列的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> 

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>