Question

我一直在努力解决这些问题，但到目前为止，我没有运气。在我的网站上，浏览器版本如下所示：

<div class="col-sm-4">
     <div class="aside">
          <div class="promo">
               <p>left content</p>    
          </div>
     </div>
   </div>
   <div class="col-sm-8">
        <div class="content"> 
             <p>right content</p>
        </div>
   </div>

对于浏览器来说效果很好，但在移动设备上我希望它能像这样布局：

       <div class="col-sm-8">
            <div class="content"> 
                 <p>right content</p>
            </div>
       </div>
       <div class="col-sm-4">
         <div class="aside">
              <div class="promo">
                   <p>left content</p>    
              </div>
         </div>
       </div>

如何通过推拉来拉出它以使其正确重新排列？

Answer 1

使用Bootstrap开发的最佳方法是考虑“移动优先”。因此，从您的移动布局开始，添加其他尺寸的推/拉类。请注意，我还在col-xs-12中添加了您的列，从技术上讲不需要它，但很高兴明确这些。

<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="row">
  <div class="col-xs-12 col-sm-8 col-sm-push-4">
    <div class="content">
      <p>right content</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-sm-pull-8">
    <div class="aside">
      <div class="promo">
        <p>left content</p>
      </div>
    </div>
  </div>
</div>

col-push和col-pull bootstrap - 它是如何工作的？

1 个答案: