三列Bootstrap布局，左侧边栏在底部 [英] Three column Bootstrap layout with left sidebar at bottom

问题描述

我想使用Bootstrap 3实现三列布局。我希望页面在桌面上显示为图像的左侧部分，而在移动设备上的右侧图像上显示。

 < aside class =left col-md-2>< / aside> 
< div class =left col-md-7>< / div> 
< aside class =left col-md-3>< / aside> 
  

有任何帮助吗？

解决方案

您可以将div保留为第一个容器，然后使用 col-lg-push - * 和 col-lg-pull - * 以打开较大的设备。 来源这里

演示 [点击代码段的完整页面测试更大的设备]

div class =snippetdata-lang =jsdata-hide =false>

  div，aside {height：50px} .content {background：lightpink;}。side1 {background：lightblue;}。side2 {background：lightgreen;}  

 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/ css / bootstrap.min.css/>< div class =container> < div class =content left col-md-7 col-lg-push-2>< / div> < aside class =side1 left col-md-2 col-lg-pull-7>< / aside> < aside class =side2 left col-md-3>< / aside>< / div>  
 
I'm trying to achieve a three-column layout with Bootstrap 3. I want the page to appear like on left part of the image while on a desktop and like on the image to the right when on mobile.
<aside class="left col-md-2"></aside>   
<div class="left col-md-7"></div>
<aside class="left col-md-3"></aside>   
Any help?

解决方案
You can keep the div as your first container followed by the asides and then use col-lg-push-* and col-lg-pull-* to switch on larger device. Source here

Demo [Click on Full Page of the snippet to test for larger device]



div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<div class="container">
  <div class="content left col-md-7 col-lg-push-2"></div>
  <aside class="side1 left col-md-2 col-lg-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>





                        
这篇关于三列Bootstrap布局，左侧边栏在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！