Question

我与bootstrap框架斗争我想在左侧创建一个带有图像的简单框，在右侧创建一些文本和其他元素。
但是在小屏幕上显示时会出现问题。

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

我想做什么（在小屏幕上）：

Answer 1

您还需要为较小的屏幕指定cols ...即 - 您不需要为md输入

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

Answer 2

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

嵌套引导网格 - 布局问题

2 个答案: