不同屏幕上的div對齊

Question

如何在不同屏幕上實現此行爲。 （灰色矩形是一些內容的div）。假設圖片1（左）是正常的，寬屏幕;圖片2（中）小（上網本或平板電腦）屏幕;圖片3（右）是手機屏幕。我使用bootstrap 3.

Answer 1

您只需要使用pull push classes of bootstrap。也可以瞭解col-*-offset-*類。

要了解更多檢查這個網站：

Twitter bootstrap official docs

這是一個例子，你如何能做到這

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

 
<div class="row"> 
 
    <div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;"> 
 
    2 
 
    </div> 
 
    <div class="col-xs-12 col-md-6 col-lg-4 col-lg-pull-4" style="height: 100px; background-color: blue;"> 
 
    1 
 
    </div> 
 
    <div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;"> 
 
    3 
 
    </div> 
 
</div>

Answer 2

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">1</div> 
    <div class="col-xs-12 col-sm-6 col-md-4">3</div> 
</div> 

Answer 3

您可以使用offset column和column ordering類。確保在適當的屏幕/網格大小上應用每一個。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
div[class^="col-"] > div { 
 
    margin: 1rem 0; 
 
    min-height: 100px; 
 
    background-color: yellow; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4"> 
 
     <div>2</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-4 col-md-pull-4"> 
 
     <div>1</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-4"> 
 
     <div>3</div> 
 
    </div> 
 
    </div> 
 
</div>

注：列的DIV額外的DIV是用於說明目的。做任何你需要做的事情。