div 之间的 HTML bootstrap 分隔线

Question

我正在练习 Bootstrap 和 HTML。请看一下我设法构建并显示回程航类的图片。为了使它看起来更好、更有条理，我想做的下一件事是:在航类之间引入一条分隔线(将出境与返回分开)。

我的问题是我不确定要使用什么来使用 Bootstrap 在 HTML 中实现这样的设计功能。我应该在航类之间引入另一个 row 并注入(inject)图像，还是尝试使用 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>在你的 returnFlyRow 之间分区。

同时添加 clearfix类到 returnFlyRow分区。

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

我改变了你的col-md-2至 col-xs-2在 jsfiddle 中更好地工作。