嵌套的引导程序网格 - 布局问题

问题描述：

我有一个与引导程序框架的争斗。
我想在左侧创建一个包含图像的简单框，并在右侧创建一些文本和其他元素。
但在小屏幕上显示时有问题。
嵌套的引导程序网格 - 布局问题

<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
小屏幕（坏）：

什么我一个米试图让（小屏幕）：

答

使用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; 
    } 
}

答

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

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

詹姆斯的方式将工作;这是更正确的引导答案。 –

嵌套的引导程序网格 - 布局问题

相关推荐