引导网格中小尺寸不起作用答案

【问题标题】：bootstrap grid small medium size not working引导网格中小尺寸不起作用
【发布时间】：2018-04-15 00:04:57
【问题描述】：

下午好，我在响应式网络上工作，我需要在小型显示器上做 1 列，在更大的显示器上做 2 列。我使用了col-12 和col-lg-6，但是当我需要更改它时，组合col-12 和col-md-6 不起作用。

奇怪的是它可以在 jsfiddle 上运行，但不能在我的网络上运行。

这是我的网页上的代码和 jsfiddle 链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <style>
            #blue {
                background:blue;
            }
            #red{
                background: red;
            }
        </style>

    </head>
    <body>



        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

                <!-- Add the extra clearfix for only the required viewport -->
                <div class="clearfix visible-md visible-lg"></div>

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
            </div>


            <div class="row">
                <div id="blue" class="col-12 col-md-6">
                    class="col-12 col-md-6"
                </div>
                <div id="red" class="col-12 col-md-6 ">
                    class="col-12 col-md-6"
                </div>
            </div>

            <div class="row">
                <div id="blue" class="col-12 col-lg-6">
                    class="col-12 col-lg-6"
                </div>
                <div id="red" class="col-12 col-lg-6 ">
                    class="col-12 col-lg-6"
                </div>
            </div>




        </div>



    </body>
</html>

https://jsfiddle.net/5yjtn1u5/

【问题讨论】：

没有课程col-12。您需要添加col-md-12（即`md、lg等）
它的工作.. 什么问题？ jsfiddle.net/5yjtn1u5/1
@AjayMakwana bootstrap 有 col-12 班级兄弟。是Bootstrap 4 这是链接v4-alpha.getbootstrap.com/layout/grid
@nethkennnnn 谢谢，兄弟。我不知道。
问题是我已经定义了 xs、sm、md、lg 和蓝色、红色的组合我已经定义了 col-12、col-md-6，其次是 col-12、col-lg- 6.当我尝试使用“控制”（缩放）向上/向下滚动时，它“正常”工作，但是当我在浏览器中打开开发人员工具并尝试移动设备时，例如iPad、Galaxy、iPhone 都不行。只有将 2 个 div 与 col-12 和 col-lg-6 类相结合，其他任何东西都不会响应变化。

标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design grid

【解决方案1】：

JSFiddle 与在浏览器上运行之间的差异似乎是设备大小。 JSFiddle 示例作为中型设备运行，而您的 Web 示例可能足够大，可以像我一样成为大型设备。您的代码失败，因为在大型设备上，如果这是您的问题，将选择“col-12”而不是“col-md-6”。

【讨论】：