Html 在bootstrap中使列具有响应性_Html_Css_Twitter Bootstrap

Html 在bootstrap中使列具有响应性

html css twitter-bootstrap

Html 在bootstrap中使列具有响应性,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,出于实验目的，我编写了如下基本代码： <!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">

出于实验目的，我编写了如下基本代码：

<!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>


.pos{
位置：相对位置；
}
.井1.井2{
位置：相对位置；
高度：380px；
}

这是输出：
但同样的布局不会出现在手机屏幕上。

我怎样才能修好它

在引导中，col-xx-x类与特定的媒体查询相关。因此，在这里，如果希望在低于767px时50%列保持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>

将

列sm-*

类更改为

列xs-*