響應在引導

使列我寫這樣一個基本的代碼用於實驗目的：響應在引導

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

回答

相關問題