Question

我已经为实验目的编写了这样的基本代码：

<!doctype html>
<html lang='en'>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        <style type="text/css">
            .pos {
                position: relative;
            }
            .well1, .well2 {
                position: relative;
                height: 380px;
            }
        </style>
    </head>
    <body>
        <div class="container pos">
            <div class="col-sm-12">
                <div class="well"></div>
            </div>
            <div class="col-sm-6">
                <div class="well well1"></div>
            </div>
            <div class="col-sm-6">
                <div class="well well2"></div>
            </div>
            <div class="col-sm-12">
                <div class="well"></div>
            </div>
        </div>
    </body>
</html>

这是输出：
但是相同的布局并没有出现在移动屏幕上我该如何解决？

Answer 1

在Bootstrap中，col-xx-x类与特定媒体查询相关。所以在这里，如果您希望50％的列在低于767px时保持50％，则必须使用col-xs-6类。您的标记应如下所示：

<body>
    <div class="container pos">
        <div class="col-sm-12">
            <div class="well"></div>
        </div>
        <div class="col-sm-6 col-xs-6">
            <div class="well well1"></div>
        </div>
        <div class="col-sm-6 col-xs-6">
            <div class="well well2"></div>
        </div>
        <div class="col-sm-12">
            <div class="well"></div>
        </div>
    </div>
</body>

使列在引导程序中响应

1 个答案: