如何在Bootstrap 3中创建自定义水平按钮组？

Question

我是Bootstrap 3中的新手。我想创建一个像这样的div -

因此，按钮组中有5个元素。

当选择一个元素时，它将看起来像这样 -

我创造的是 -

代码是 -

<!-- Weather -->
                    <div class="element page-header">
                        <div class="header_text">
                            Weather
                        </div>
                        <div class="description_text">
                            <div class="row">

                                <!-- Sunny -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/sunnylogo.png" alt="Sunny logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Sunny
                                    </div>
                                </div>
                                <!-- End Sunny -->

                                <!-- Walking -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/walkinglogo.png" alt="Walking logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Walking
                                    </div>
                                </div>
                                <!-- End Walking -->

                                <!-- Windy -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/windylogo.png" alt="Windy logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Windy
                                    </div>
                                </div>
                                <!-- End Windy -->

                                <!-- Rain -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/rainlogo.png" alt="Rain logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Rain
                                    </div>
                                </div>
                                <!-- End Rain -->

                                <!-- Snow -->
                                <div class="col-xs-2">
                                    <div class="horizontal_center">
                                        <img src="img/snowlogo.png" alt="Snow logo">
                                    </div>

                                    <div class="horizontal_center">
                                        Snow
                                    </div>
                                </div>
                                <!-- Snow -->
                            </div>
                        </div>
                    </div>
            <!-- End Weather -->

所以，我在div中使用了 page-header 类并找到了一个下划线。

但是我希望它像图片一样左右边缘 -

并且，当它被选中时，如何处理它以显示选择器 -

有人可以帮助我吗？

提前感谢您的帮助。

Answer 1

使用另一个div与类＆＃39; container-fluid＆＃39;  然后在你的CSS中

.container-fluid
{
   border-bottom: 1px solid #333;
} 

.col-xs-2:hover, .col-xs-2:active, .col-xs-2:focus
{
   border-bottom:2px solid #relevent color;
}

但是，我建议你使用锚标签（），你的col-xs-2不会将宽度除以5，所以给它们自定义宽度。（20％）