响应在引导

使列我写这样一个基本的代码用于实验目的：响应在引导

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

这是输出：
但相同的布局不会出现在手机屏幕。
我该如何解决它？

来源

2015-03-13 Ajay Kulkarni

将您的'col-sm- *'类更改为'col-xs- *'。您的移动设备正在使用xs断点。 – Marcelo 2015-03-13 15:56:13

太棒了....谢谢 – 2015-03-13 15:59:42

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

来源

2015-03-13 16:00:23 JoeMecPak

回答

相关问题