左右拉不上手機

所以我有一個引導36個網格列。左邊的邊欄和右邊的內容。當我使用拉右/左時，它只能在桌面上使用？左右拉不上手機

<div class="container"> 
    <div class="row">      
     <div id="sidebar" class="col-md-9 col-xs-36 pull-right"> 
     </div> 
     <div id="content" class="col-md-27 col-xs-36 pull-left"> 
     </div> 
    </div> 
</div>

在手機上，側邊欄仍然顯示第一個。爲什麼？

好吧我定製了我的網格，你可以在引導網站上做到這一點。請停止說我不能。

來源

2016-04-18 hello123

引導將12網格系統 – Jainam

偉大的故事，先生。 – hello123

如果你正在使用bootstrap，你應該知道它的12個網格佈局 –

因爲你已經使用col-xs-36這意味着你爲什麼要使用pull-right或pull-left，減少列的數量這一欄都以100％的有效寬度，然後再這將是確定

.box{padding-top: 30px;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div class="container"> 
 
    <div class="row">      
 
     <div id="sidebar" class="col-md-9 col-xs-6 pull-right box"> 
 
      <p>abd abd abd abd abd abd abd abd abd abd abd abd </p> 
 
     </div> 
 
     <div id="content" class="col-md-3 col-xs-6 pull-left box"> 
 
      <p>abd abd abd abd abd abd abd abd abd abd abd abd </p> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-04-18 12:00:36

不，我在網站上定製了它。 – hello123

我知道你定製了它，但在移動設備上，你添加了所有網格，如col-xs-36，然後如果添加拉 - 右，它將保持在相同的位置 –

第二列應該高於第一列右？ – hello123

試試看看這個代碼。

<div class="container"> 
    <div class="row">      
     <div id="sidebar" class="pull-right col-xs-9"> 
     </div> 
     <div id="content" class="pull-left col-xs-27"> 
     </div> 
    </div> 
</div>

來源

2016-04-18 12:05:18

它不起作用 – hello123

col-xs-36意味着它將在移動設備上具有100％的寬度。 –

在移動邊欄仍顯示第一。爲什麼？

來解釋它。你有一個引導row他們的工作是爲col-*提到它裏面的所有元素對齊到其各自的寬度。而且，如果空間不足以顯示一行中的所有元素，那麼它將會將它們推到另一個之下。這就是它如何被稱爲響應，並且它是Bootstrap的默認行爲。

現在你說你定製的代碼有36網格系統，我知道它。

現在在下面的代碼。

<div class="container"> 
    <div class="row">      
     <div id="sidebar" class="col-md-9 col-xs-36 pull-right"> 
     </div> 
     <div id="content" class="col-md-27 col-xs-36 pull-left"> 
     </div> 
    </div> 
</div>

你說row內雙方的div必須佔據額外的小型設備36列。所以如你所說你有36網格系統，這意味着36 = 100%寬度。

如上所述，row無法在同一行中填充這兩個div，因爲它們都正在削減100％的寬度。所以它將它們移動到另一個之下。

側欄位於頂層，因爲它是層次結構中首先提到的一個。

希望這是有益

編輯1：如果你的目的是要顯示在右邊的左側邊欄中，然後將容器中的所有設備......而在移動設備上，然後再一邊出示容器酒吧..在@media查詢的幫助下，你可以贏得這個。下面的工作代碼片段。而且，這裏是Working Fiddle

@media only screen and (max-width: 480px) { 
 
    #sidebar { 
 
    float: right !important; 
 
    } 
 
    #content { 
 
    float: left !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div id="content" class="col-md-8 col-xs-12 pull-right"> 
 
     container 
 
    </div> 
 
    <div id="sidebar" class="col-md-4 col-xs-12 pull-left"> 
 
     Sidebar 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2016-04-18 12:13:35

啊謝謝你，我現在明白了。你知道我該如何解決這個問題嗎？ – hello123

@ hello123如果你能讓我知道所需的行爲，那麼我們可以解決這個問題。就像移動設備上的邊欄必須發生什麼？你想展示它？把它藏起來？？在某個按鈕上切換顯示？ etc等 –

我希望內容先顯示在移動設備上，然後再顯示在側邊欄上。 – hello123

左右拉不上手機

回答

相關問題