Html 引导网格边界问题

我有以下网格系统显示航班信息（10列）和选择按钮和价格（2列）。我试图制作一个边界，将选择按钮部分和其余航班信息分开，但当我应用边界CSS规则时，它只画了一半的线。我怀疑这可能是我的行/列结构的问题。如何解决当前问题

谢谢你的帮助

结果：

CSS:

HTML:

06:20
LHR
5小时30分
直接的
12:50
SVO

06:20
SVO
5小时30分
直接的
12:50
LHR
&磅；100
挑选

我可能会将每12列内容放在单独的行中，但是，我认为您不需要这样做来实现您的目标。试着在你的“returnFlyRow”类上加一个右边框

---

你能让我们成为一个或链接我们一个现场工作的网站吗？谢谢斯蒂芬妮，作品！请您解释一下为什么将边框设置为。returnFlyRow效果很好，但将边框设置为。SelectButton柱只画了一半？我很高兴为您解决了这个问题！您基本上有两个主要列。左边的那个大的包含嵌套在里面的两行。右侧的列不包含这些嵌套行。虽然看起来它们的高度相等，但实际上并非如此，因此较短一侧的边框仅与内容相同。感谢您的详细解释，明白了。再次感谢！

.selectButtonColumn{
    border-left: 1px solid;
}

    <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="clearfix returnFlyRow">
                            <hr>

                            <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>

.returnFlyRow{
    border-right: 1px solid;
}