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>

当窗口全屏时，可以。 Normal

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

它是垂直的。

我想在此页面中停止引导程序的这个属性。

有人可以帮助我吗？

提前感谢您的帮助。

Answer 1

不要使用bootstrap的col-md-x和row类。制作自己的div并自己设计风格。

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

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

Answer 2

根据分辨率

，您可以使用多个类

col-md-2中型设备桌面（≥992px）

col-sm-2小型设备平板电脑（≥768px）

col-xs-2超小型设备电话（＆lt; 768px）

使用

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

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

2 个答案: