html - 如何在 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>

当窗口全屏时，就OK了。

但如果我把它变小，就会产生问题。

垂直移动。

我想在这个页面中停止 bootstrap 的这个属性。

谁能帮帮我？

在此先感谢您的帮助。

Answer 1

您可以根据分辨率使用多个类

col-md-2 中型设备桌面(≥992px)

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

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

使用

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