div之间的HTML引导分隔线

Question

我正在使用bootstrap和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

在<hr> div之间添加returnFlyRow。

同时将clearfix类添加到returnFlyRow div。

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

我将您的col-md-2更改为col-xs-2，以便在jsfiddle中更好地工作。

Answer 2

您可以尝试以下方法之一： 1.对于起飞航班，以飞机起飞图标开始行，对于返程航班，以飞机下降图标开始行。 2.按列排列开始和返回。 3.在航班之间添加边界。

HTH。