Question

我正在尝试使用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>

Answer 1

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

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

查看演示here

检查文档here

Answer 2

对我来说，你的问题似乎与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>

Bootstrap 3网格系统响应

2 个答案: