簡單的引導程序xs的斷點佈局在手機和PC上看起來非常不同（幫助）

如果此主題已被覆蓋，我會繼續並道歉（雖然我還沒有在Stack Exchange上找到它）。我正在嘗試學習網格系統並聽取了許多講座。爲了練習，我試圖在container-row-col結構中顯示三個圖像。問題在於我的簡單引導程序網格設置在我認爲是xs斷點的計算機上正確顯示，而不是在移動設備上顯示。後者的填充似乎過度（水槽幾乎與其中一個圖像一樣大），並且在側面不對稱。我已經包括下面的兩個屏幕截圖。簡單的引導程序xs的斷點佈局在手機和PC上看起來非常不同（幫助）

我試過註釋掉css文件（我只是用來添加填充到col的頂部和底部），以防萬一不知何故干擾bootstraps自然造型。那什麼都沒做。任何幫助，使PC視圖和移動網站看起來不那麼不協調，將不勝感激！（下面的圖像代碼）的xs

PC視圖斷點：

XS-斷點的移動視圖：

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" /> 
    <title></title> 
</head> 
<body> 
    <div class = "container"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div>  
      <div class="col-xs-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div> 
      <div class="col-xs-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div> 
     </div> 
    </div> 
</body>

（下面了main.css文件）

.top-buffer { 
margin-top: 20px;}

來源

2017-07-02 Shadow43375

萬一別人是通過這個困惑，我會說，解決辦法是在HTML頭下面的標籤：<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2017-07-26 19:07:57 Shadow43375

使用'sm'作爲移動設備。 'xs'可能無法呈現，因爲屏幕尺寸大於參數xs。看看是否使用'sm'作爲手機屏幕的作品！

編輯1：試試這個代碼：

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" /> 
    <title></title> 
</head> 
<body> 
    <div class = "container"> 
      <div class="col-xs-6 col-sm-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div>  
      <div class="col-xs-6 col-sm-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-4 top-buffer"> 
       <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded"> 
      </div> 
    </div> 
</body>

我想你指定行，然後在xs，使用18列總，這同時努力適應自己，搞亂了填充。在上面的代碼中，我刪除了row並添加了sm。

來源

2017-07-02 02:17:28 Ayushya

我不認爲這與「SM」代替「XS」會讓一個不同之處在於，除非另有說明，否則默認情況下引導程序會假定列值與其他每個中斷的xs相同。因此，對於這種情況，通過將xs設置爲6，我們也將sm設置爲6.但是，出於謹慎的考慮，我嘗試實施您的解決方案（據我所知）。不幸的是，我仍然得到相同的結果...任何其他的想法？我一定在犯一個非常明顯的錯誤...... – Shadow43375

請記住，一行中有12列，如果你想要三張圖片，那麼每張圖片使用4列。在'xs'你已經使用了6列。如果您想要三張圖像，請將6替換爲4. – Ayushya

正確。所以對於xs視圖，我*會喜歡每行有兩個圖像。沒關係。但是我希望手機上的填充與PC上的填充相同。我只是在這裏絞盡腦汁，爲什麼我的手機的顯示器會增加填充的大小，並且2）在圖像的右側給予比在左側更多的填充。更大的顯示器給所有斷點的預期結果，這是真正令人困惑的事情...... – Shadow43375

簡單的引導程序xs的斷點佈局在手機和PC上看起來非常不同（幫助）

回答

相關問題