布爾瑪css框架列不堆疊在Chrome瀏覽器手機瀏覽器

我想弄清楚爲什麼我的小靜態網頁在移動設備上查看時沒有正確顯示（在Chrome瀏覽器的Android應用上發現）。根據文檔，列應該自動堆疊在移動設備上。但是，當我查看它時，我看到正常的寬度適合屏幕的頁面的正常視圖，但列保持一行。顯示在下面的截圖中。布爾瑪css框架列不堆疊在Chrome瀏覽器手機瀏覽器

我測試了一下，看看它是否是我的代碼，通過在桌面瀏覽器上調整頁面大小，頁面按預期進行響應，在單個列中堆疊這些卡片。這是在我的手機上模仿的桌面視圖。

任何想法是怎麼回事？我究竟做錯了什麼？代碼如下

<html> 
<head> 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/> 

</head> 
<body style="background-color:#00aced;"> 

    <div class="container"> 
     <div class="notification" style="background-color:#fff"> 
      <strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from 
      <a href="">here</a>. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code. 
      <br> 
     </div> 
    </div> 

    <div style="padding: 20px;" class="container"> 

     <div class="columns"> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Githubforkodi 
         </p> 
        </header> 
        <div class="card-content"> 
         <div class="content"> 
          A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Squeee! 
         </p> 
        </header> 
        <div class="card-content"> 
         <div class="content"> 
          A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="card"> 
        <div class="card-image"> 
         <figure class="image is-4by3"> 
          <img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image"> 
         </figure> 
        </div> 
        <header class="card-header"> 
         <p class="card-header-title"> 
          Alternative Facts 
         </p> 
        </header> 
        <div class="card-content">  
         <div class="content"> 
          Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you. 
          Creator <a href="https://twitter.com/good_samarit4n">@goodsamarit4n</a>. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a> 
          <br> 
          <small>8:00 PM - 24 Jul 2017</small> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2017-07-25 CaffeinatedCoder

添加以下元標記可能會解決此問題。

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>

來源

2017-07-26 20:57:25 ironcladgeek

哦，男人，我簡直不敢相信那很簡單。然而，我似乎無法找到它在文檔中的位置（或者至少不是他們討論列類的地方）。非常感謝！ – CaffeinatedCoder

這是控制移動設備佈局的標準規則，我也從[bootstrap]（http://getbootstrap.com/getting-started/#template）世界中學到了它！你可以閱讀更多關於它[這裏]（https://www.w3schools.com/css/css_rwd_viewport.asp）和[那裏]（https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag ）。 @CaffeinatedCoder – ironcladgeek

感謝您提供一些背景。我不知道，因爲這是我第一次嘗試在移動設備上進行網站工作：P – CaffeinatedCoder

布爾瑪css框架列不堆疊在Chrome瀏覽器手機瀏覽器

回答

相關問題