重新綁定引導列

Question

嘗試使用空行div和下面的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

推拉是管理這是一個好辦法，但這隻會在同一行的工作，因爲這會給DIV left和right財產不創建新排。解決方案（解決方法）我通常使用的是創建twitter div 2次。像這樣：

<div class="col-md-6 col-sm-12"> 
    <!-- Links --> 
</div> 
<div class="col-md-6 hidden-sm hidden-xs"> 
    <!-- Twitter --> 
</div> 
<div class="col-sm-12"> 
    <!-- Content --> 
</div> 
<div class="col-sm-12 hidden-md hidden-lg"> 
    <!-- Twitter --> 
</div> 

Answer 2

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>