Question

我想以我的方式重新组织Bootstrap网格系统以达到工作目的。我的正常Bootstrap网格系统的代码：

<div class="container">
   <div class="row">
         <div class="col-md-3 col-xs-12">
              Left Side bar
         </div>
         <div class="col-md-6 col-xs-12">
              Main Content
         </div>
         <div class="col-md-3 col-xs-12">
              Right Side bar
         </div>
   </div>
</div>

但我想为移动设备整理这些内容：

主要内容 - ＆gt; 左侧栏 - ＆gt; 右侧栏

我该怎么做？

Answer 1

您需要使用Bootstrap中的push/pull类。处理此问题的最佳方法是从您希望在移动视图中排序列的方式开始，然后在您希望它们交换的断点处添加推/拉类。例如：

.main { background-color: red; }
.left { background-color: green; }
.right { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
       <div class="row">
             <div class="col-md-6 col-xs-12 col-md-push-3 main">
                  Main Content
             </div>
             <div class="col-md-3 col-xs-12 col-md-pull-6 left">
                  Left Side bar
             </div>
             <div class="col-md-3 col-xs-12 right">
                  Right Side bar
             </div>
       </div>
    </div>

如何以自己的方式组织引导网格系统？

1 个答案: