Bootstrap 3 div崩溃命令

2014-03-13 75 views 0 likes

我使用Bootstrap 3来构建网站。我有以下的布局如右图所示，在这里：Bootstrap 3 div崩溃命令

layout

被编码如下：

<div class="col-md-12 main-content"> 
    <div class="col-md-2 sidebar-left"> 
     <!-- Left sidebar content here --> 
    </div> 
    <div class="col-md-7 main-articles"> 
     <!-- Main articles go here --> 
    </div> 
    <div class="col-md-3 sidebar-right"> 
     <!-- Right sidebar content here --> 
    </div> 
</div>

当您使用手机查看/提交的布局显示是这样的：

1st div - left sidebar (pictured in red)  
2nd div - main-articles (pictured in yellow) 
3rd div - right sidebar (pictured in greenish)

我希望它能像这样显示：

2nd div - main-articles (pictured in yellow) 
1st div - left sidebar (pictured in red)  
3rd div - right sidebar (pictured in greenish)

有什么方法可以解决这个问题吗？谢谢。

来源

2014-03-13 Andrei P

回答

在您的手机媒体查询，添加花车您的div像这样..

#1st{ 
float:right; 
} 
#2nd{ 
float:left; 
} 
#3rd{ 
float:right; 
}

这应该得到您想要的布局。

来源

2014-03-13 11:48:58

尝试这个

<div class="row"> <div class="col-sm-7 col-sm-push-2 main-articles"> Main articles </div> <div class="col-sm-2 col-sm-pull-7 sidebar-left"> Left sidebar </div> <div class="col-sm-3 sidebar-right"> Right sidebar </div> </div>

观看演示：http://jsfiddle.net/Debananda/y54kX/

来源

2014-03-13 11:50:03 Debananda

Bootstrap 3 div崩溃命令

回答

相关问题