Короткая строка, связывающая содержимое двух столбцов 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. Это must есть 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>