CSS專欄響應問題

-1

我們正在用CSS構建一個簡單的網站，爲我在學校的其他學生提供教育資源。我選擇了Bootstrap列。問題在於我們學校的桌面計算機和平板電腦會將列堆疊到不同的行中，而不是縮小尺寸。CSS專欄響應問題

這裏是所有相關的HTML代碼：

<!-- Left Side Bar --> 
    <div style="background-color:#F3F8FC;" class="col-lg-2 mobile-hide" ><!-- Not Displayed on Mobile --> 
     <div class="fotd"> 
      <div class="fotd-title"> 
       <h4>Fact Of The Day</h4> 
      </div> 
      <p>Text</p> 
     </div> 

     <div class="twitter mobile-hide"> 
      <a class="twitter-timeline" href="https://twitter.com/RHL_Inspire" data-widget-id="720721136867282945">Tweets by @RHL_Inspire</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
     </div> 
    </div> 

<!-- Center Content --> 
    <div class="col-lg-7 "> 
     <h3 class="content title">Letter from The Editor In Narwhal</h3> 
     <p class="content" > 
     This is a link. <a href="/math">This is the actual link</a> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis,  
     </p> 
    </div> 



<!-- Right Side --> 
    <div style="background-color:#F3F8FC;" class="col-lg-3 mobile-hide"> 
     <h3 class ="center mobile-hide">Editors Picks!</h3> 
      <ul class="stickynote mobile-hide"> 
       <li class="stickynote mobile-hide"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 

       <li class="stickynote"> 
        <a class="stickynote" href="http://www.google.com"> 
         Google 
        </a> 
       </li> 
      </ul> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <footer>&copy; 2016 The StickyNote | <a href="http://www.google.ca">Google</a></footer> 
      </div> 
     </div>

來源

2016-04-15 AgentSpyname

請創建一個Jsfiddle併發布它，以便我們可以更好地理解您的問題 – geeksal

您很難清楚您遇到的問題，您可以嘗試創建一個@geeksal建議的示例，還是詳細說明一下？是推特轉移到了當屏幕轉到'lg'時最左邊。 – Tricky12

HTML格式不正確。不要將H3放入P中，並且關閉DIV標籤太多。請清理這個，所以我們可以幫助。 – ZimSystem

的問題是，我們不得不改變代碼來指定列的兩種尺寸。例如，在原來的代碼，我們有：

<div style="background-color:#F3F8FC;" class="col-lg-7">

這不得不簡單地改爲：

<div style="background-color:#F3F8FC;" class="col-lg-7 col-sm-7">

的col-sm-7被用於較小的屏幕（如片劑和低清晰度的臺式電腦。

來源

2016-04-16 22:36:43 AgentSpyname

CSS專欄響應問題

回答

相關問題