嵌套的引導程序網格 - 佈局問題

我有一個與引導程序框架的爭鬥。
我想在左側創建一個包含圖像的簡單框，並在右側創建一些文本和其他元素。
但在小屏幕上顯示時有問題。
嵌套的引導程序網格 - 佈局問題

<div class="col-md-8" style="margin-top: 3px;"> 
      <div class="feed-box"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250"> 
        </div> 
        <div class="col-md-11"> 
         <div class="row"> 
          <p><a href="#">John Doe</a> announced something</p> 
         </div> 
         <div class="row"> 
          <p> 
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column. 
          </p> 
         </div> 
         <div class="row"> 
          <a href="#">Comment</a> 
          <a href="#">Share</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>

我將通過圖片解釋：
桌面（它的罰款此填充是不是在這裏很重要）：
enter image description here
小屏幕（壞）：

什麼我一個米試圖讓（小屏幕）：

來源

2014-04-15 1110

使用media queries來設置小屏幕的元素。

例如檢查這個fiddle（調整看差）

CSS使用

@media (max-width: 800px){ 
    .feed-box .col-md-1{ 
     float:left; 
    margin-bottom:8px; 
    } 
    .feed-box .col-md-11{ 
     margin-top:15px; 
    } 
}

來源

2014-04-15 18:23:43 James

您還需要指定的cols爲小屏幕...即 - 你不需要把在MD

<div class = "row"> 
    <div class = "col-sm-1"> 
    </div> 
    <div class = "col-sm-11"> 
    </div> 
</div>

來源

2014-04-15 18:14:25 Intellidroid

詹姆斯的方式將工作;這是更正確的引導答案。 –

嵌套的引導程序網格 - 佈局問題

回答

相關問題