Question

我按照网格系统显示航班信息（10列）并选择按钮＆amp;价格（2栏）。我正在尝试创建一个边框，将选择按钮部分与其余的航班信息分开，但是当我应用边框CSS规则时，它只画了一半的路线。我怀疑这可能是我的行/列结构的问题。如何解决当前问题？

感谢您的帮助！

结果：

enter image description here

CSS：

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

HTML：

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

Answer 1

我可能会将每12列内容分成不同的行，但我认为你不需要这样做才能实现你所追求的目标。尝试在“returnFlyRow”类上添加右边框。

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

Bootstrap网格边框问题

1 个答案: