Question

下午好，我在响应式网络上工作，我需要在小型显示器上进行1次col，在较大的显示器上进行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/

Answer 1

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

bootstrap网格小中等大小不工作

1 个答案: