如何在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 class 并找到了下划线。

但我希望它像图片那样左右都有一些空白-

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

.

谁能帮帮我？

在此先感谢您的帮助。

Answer 1

使用另一个 div 和 class 'container-fluid' 然后在你的 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 不会 divide 宽度增加 5，因此，给它们自定义宽度。(20% )