WordPress - 使用引導讓我的列自動調整大小

我有一個使用Bootstrap 2.3.1的Wordpress模板。我目前通過SPAN4和SPAN8設置了兩個區域。分辨率鎖定在1170像素，因此不需要配置Bootstrap的lg組件。WordPress - 使用引導讓我的列自動調整大小

我想以紅色顯示的區域提供一些幫助，關於如何配置我的嵌套列，以便它們正常工作。它們在已被定義爲跨度8的區域內，因此實際上，它是一個8寬的網格，需要配置爲在中型設備上顯示3列，在小型設備上顯示2列，在特小型設備上顯示1列。

我對CSS比較陌生，但對基本編碼有一些瞭解，現在只是在做我的腦袋。附加的圖片顯示我在之後 My Wordpress layout

我似乎無法得到任何引導程序來處理我想要顯示的尺寸。

來源

2016-09-23 Brett Canfield

我建議你使用引導3版

http://getbootstrap.com/css/#grid-responsive-resets

不像第2版，它具有類，如col-lg-*col-md-*col-sm-*col-xs-*，它可以讓你的工作更容易。

試圖理解你的問題。

試試下面的演示代碼，看看它是否佈局你想

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css"> 
<style> 
    .b { 
    border: 1px solid #333; 
    } 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4">aside</div> 
    <div class="col-xs-8"> 
     main 
     <div class="row"> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

來源

2016-09-23 08:33:20 Littlee

我花了一下午加什麼，我不知道是bootstrap3類，如那些，並讓他們都設置爲列自動調整大小，根據屏幕大小，但沒有意識到他們適用於什麼版本。現在已經添加了bootstrap 3功能，現在可以使用您指定的那些類。 –

我讓它運行引導程序3，但列不按照我希望的方式堆疊。目前，每個項目都是獨立的div，沒有任何嵌套，並且我在第二列下面獲得第三列，所以它變成了一個更長的列表。我希望他們均勻地重新分配列表，因爲它隨着屏幕尺寸變小而堆疊列。 –

我編輯了我的答案，請查看它。 – Littlee

WordPress - 使用引導讓我的列自動調整大小

回答

相關問題