如何在 Bootstrap 3 中禁用自动水平到垂直转换

Question

我在 bootstrap 3.

的页面中使用此代码

                            <div class="description_text">
                            <div class="row">
                                <!-- Sunny -->
                                <div class="col-md-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-md-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-md-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-md-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-md-2">
                                    <div class="horizontal_center">
                                        <img src="img/snowlogo.png" alt="Snow logo">
                                    </div>

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

当window全屏时，就OK了。

但是如果我把它变小，就会出现问题。

垂直移动。

我想停止此页面中 bootstrap 的 属性。

谁能帮帮我？

在此先感谢您的帮助。

Answer 1

不要使用 bootstrap 的 col-md-x 和行 classes。制作您自己的 div 并自行设置样式。

或者您可以像这样设置 col-md-2 class 的样式：

.col-md-2{
    float: left;
}

Answer 2

根据分辨率可以使用多个class

col-md-2 中型设备台式机 (≥992px)

col-sm-2 小型设备 平板电脑 (≥768px)

col-xs-2 超小型设备手机 (<768px)

使用

<div class="col-md-2 col-sm-2 col-xs-2"></div>