重新排序Bootstrap列

Question

尝试使用空div中的有用链接重新排序bootstrap列，并且下面的lorem ipsum文本占用12列。尝试使用clearfix和各种列大小，但没有任何工作。

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

<div class="container">
  <div class="row">

    <!--Links-->
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-4 col-md-offset-0">
      <h2>Useful Links</h2>
      <ul>
        <li><a href="#">Link 1 Title</a></li>
        <li><a href="#">Link 2 Title</a></li>
        <li><a href="#">Link 3 Title</a></li>
        <li><a href="#">Link 4 Title</a></li>
      </ul>   
    </div>
    <!--Links close-->
    
    <div class="clearfix"></div>
    
    <!--Content-->
    <div id="content-right" class="col-xs-10 col-sm-10 col-md-12 col-md-push-0">
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  
    </div>
    <!--Content close-->
    
    <!--Twitter-->
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-6 col-md-pull-6">
      <h2>Twitter</h2>
    </div> 
    <!--Twitter close-->

  </div><!-- row close -->
</div>

Answer 1

1. 您的两个块（links和twitter）具有相同的id="content-left"。这是不对的。 id必须是唯一的。

2. 您可以将links和content打包到一个额外的块中，并对content应用负边距。

注意：如果twitter块的高度不大于links块的高度，则此解决方案有效。

请检查结果：

#block-links   { background-color: #9fc; }
#block-content { background-color: #ff9; }
#block-twitter { background-color: #fc9; }

@media (min-width: 992px) {
  #block-content {
    margin-right: -200%;
    width: 300% !important;
  }
}

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

<div class="container">
  <div class="row">

    <!-- Additional block -->
    <div class="col-xs-10 col-md-4">
      <div class="row">

        <!--Links-->
        <div id="block-links" class="col-xs-12">
          <h2>Useful Links</h2>
          <ul>
            <li><a href="#">Link 1 Title</a></li>
            <li><a href="#">Link 2 Title</a></li>
            <li><a href="#">Link 3 Title</a></li>
            <li><a href="#">Link 4 Title</a></li>
          </ul>   
        </div>
        
        <!--Content-->
        <div id="block-content" class="col-xs-12">
          <h2>Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  
        </div>
    
      </div>
    </div>
    
    <!--Twitter-->
    <div id="block-twitter" class="col-xs-10 col-md-6 col-md-offset-2">
      <h2>Twitter</h2>
    </div> 

  </div>
</div>

Answer 2

pull和push是一种管理它的好方法，但这只能在同一行上运行，因为这会产生div public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { if (aboveLinear == null || belowLinear == null) { return true; } int currentY = e1.getY(); float ratio = abovelinear.getHeight() / (aboveLinear.Bottom - currentY); aboveLinear.SetScaleY( aboveLinear.GetScaleY()- ratio); belowLinear.SetScaleY(belowLinear.GetScaleY() +ratio); return true; } }); 和left属性，而不会创建新行。我通常使用的解决方案（解决方法）是创建twitter div 2次。像这样：

right