0

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

4

2 回答 2

1

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

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

在这里查看演示

在此处查看文档

于 2013-09-18T14:48:38.670 回答
0

对我来说，您的问题似乎与移动设备上的 div 顺序相同，所以我也会投票赞成重复。

在您的情况下，请参阅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>
于 2013-09-19T20:52:15.477 回答