三列 Bootstrap 布局，左侧边栏位于底部

Question

我正在尝试使用 Bootstrap 实现三栏布局 3. 我希望页面在桌面上显示在图像的左侧，在桌面上显示在图像的右侧在手机上。

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

有什么帮助吗？

Answer 1

试试这个

<div class="col-xs-12 visible-xs">Middle Column</div>

<div class="col-lg-2 col-xs-12">Left column</div>
<div class="col-lg-8 hidden-xs">Middle column</div>
<div class="col-lg-2 col-xs-12">Right column</div>

希望对您有所帮助。

Answer 2

HTML

<div class="row">
  <div id="col1" class="col-md-4">col-md-1</div>
  <div id="col2" class="col-md-4">col-md-2</div>
  <div id="col3" class="col-md-4">col-md-3</div>
</div>

CSS

#col1 {background-color: blue;}
#col2 {background-color: purple;}
#col3 {background-color: green;}

#col1 {display:table-footer-group;}
#col2 {display:table-header-group;}
#col3 {display:table;}

Fiddle

Answer 3

您可以将 div 作为您的第一个容器，然后是旁白，然后使用 col-lg-push-* 和 col-lg-pull-* 来打开更大的设备。 Source here

演示 [单击代码段的整页以测试更大的设备]

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 布局，左侧边栏位于底部

Three column Bootstrap layout with left sidebar at bottom

css

twitter-bootstrap

twitter-bootstrap-3