Bootstrap 3 网格系统响应式答案

【问题标题】：Bootstrap 3 grid system responsiveBootstrap 3 网格系统响应式
【发布时间】：2013-09-23 09:09:37
【问题描述】：

我正在尝试使用 Bootstrap 3 使我的用户个人资料具有响应性。我的个人资料的一个非常简化的示例如下：http://jsfiddle.net/RRfSW/5/

在桌面上，框 1 和 2 位于顶部很重要，因为它们包含最相关的信息。在移动设备上，框 2 应该在框 1 的下方——同样的原因。但正如您通过调整示例大小看到的那样，它将位于框 3 下方。

当然，我可以简单地将框 1 和 2 放在 div[class=row] 上，但正如您所见，框的高度不同，我会在桌面上浪费很多空间。

我该如何处理这个问题？

<div class="row">
<div id="leftBar" class="col-md-7">

    <div id="mainProfile" class="row">
        <div class="col-md-12">
            1
        </div>
    </div>

    <div id="details" class="row">
        <div class="col-md-6">  
            3                
        </div>

        <div class="col-md-6">                    
        </div>
    </div>

</div>


<div id="rightBar" class="col-md-5">
    <div id="contact" class="row">
        <div class="col-md-6">   
            2                
        </div>
    </div>
    <div id="other" class="row">
        <div class="col-md-6">     
            4               
        </div>
    </div>
</div>

【问题讨论】：

查看getbootstrap.com/css/#grid 有一些关于针对不同大小使用不同列类的信息。
真的吗？对我而言，您似乎只是将 md 类用于所有内容，而不是用于手机和平板电脑的更具体的 xs 和 sm 类？
那些课程不能解决我的具体问题。你可以证明我错了。
Order of div on mobile的可能重复

标签： twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

对我来说，您的问题似乎与 Order of div on mobile 相同，所以我也会投票赞成重复。

在您的情况下，请参阅http://bootply.com/82040

css

#mainProfile {
    background-color: #ccaaaa;
    height:200px;
}

#details {
    background-color: #aaccaa;
    height:180px;
}

#contact {
    background-color: #cc66ff;
    height:300px;
}

#other {
    background-color: #aaaacc;
    height:180px;
}    

.floatright{float:right;}
@media (max-width: 992px)
{    
    .floatright{float:none;}
}

html

<div class="row">
    <div id="leftBar" class="col-md-7">

        <div id="mainProfile" class="row">
            <div class="col-md-12">
1               main profile
            </div>
        </div>
    </div>    
    <div id="rightBar2" class="col-md-5 floatright">
        <div id="contact" class="row">
            <div class="col-md-6">   2                
            </div>
        </div>
    </div>

<div id="leftBar" class="col-md-7">
        <div id="details" class="row">
            <div class="col-md-6"> 3 details           
            </div>

            <div class="col-md-6">    ???                
            </div>
        </div>

    </div>


<div id="rightBar" class="col-md-5">
        <div id="other" class="row">
            <div class="col-md-6">     4               
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

删除额外的行类并添加更多特定于设备的类，例如，

col-xs-8 col-sm-8 col-md-6

查看演示here

查看文档here

【讨论】：

嗯，这正是我提到的问题：框 1 和 3 之间的间隙。
那是因为你为 div 添加了不同的高度。检查答案中的更新小提琴。 jsfiddle.net/7WMBr/1
但这正是重点！随着用户添加内容，div 将具有不同的高度。