div之間的HTML引導分隔線

Question

我正在練習引導程序和HTML。請看看我設法建造並顯示回程航班的圖片。接下來我想要做的是讓它看起來更漂亮更有條理：在航班之間引入一條分隔線（從回程分開）。

我的問題是，我不確定要使用bootstrap在HTML中實現這樣的設計功能要使用什麼。我是否應該在航班之間引入另一個row並注入圖像，或者試着使用borders來完成它？

感謝您的幫助！

<div class="container well well-md searchResult"> 

    <ul class="list-group"> 
     <li class="list-group-item"> 
      <div class="row"> 
       <div class="col-md-10"> 
        <div class="departFlyRow"> 
         <div class="col-md-2 col-md-offset-2"> 
          <div><b>06:20</b></div> 
          <div>LHR</div> 
         </div> 

         <div class="col-md-2"> 
          <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i> 
         </div> 

         <div class="col-md-2"> 
          <div>5h 30</div> 
          <div>direct</div> 
         </div> 

         <div class="col-md-2"> 
          <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i> 
         </div> 

         <div class="col-md-2"> 
          <div><b>12:50</b></div> 
          <div>SVO</div> 
         </div> 
        </div> 

        <div class="returnFlyRow"> 
         <div class="col-md-2 col-md-offset-2"> 
          <div><b>06:20</b></div> 
          <div>SVO</div> 
         </div> 

         <div class="col-md-2"> 
          <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i> 
         </div> 

         <div class="col-md-2"> 
          <div>5h 30</div> 
          <div>direct</div> 
         </div> 

         <div class="col-md-2"> 
          <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i> 
         </div> 

         <div class="col-md-2"> 
          <div><b>12:50</b></div> 
          <div>LHR</div> 
         </div> 
        </div> 

       </div> 

       <div class="col-md-2 selectButtonColumn"> 
        <div><b>&pound;100</b></div> 
        <button type="button" class="btn btn-success">Select</button> 
       </div> 
      </div> 
     </li> 
    </ul> 

</div> 

Answer 1

添加您returnFlyRow div的之間的<hr>。

同時將clearfix類添加到returnFlyRow divs。

http://jsfiddle.net/m9nn9tvj/1/

我改變了你col-md-2到col-xs-2到的jsfiddle更好的工作。

Answer 2

您可以嘗試以下方法之一： 1.對於起始航班，啓動帶有飛機起飛圖標的行，返回航班時，以飛機圖標下降開始行。 2.按列安排開始和返回。 3.在航班之間添加邊界。

HTH。