不同屏幕上的div對齊

-2

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

來源

2017-03-09 pr3sto

你爲什麼要那樣做？從UI/UX的角度來看。 – Marv

第二個矩形是最重要的。這就是爲什麼它位於中間。而對於小屏幕（平板電腦和手機）的用戶來說，它應該是最高的。 – pr3sto

這在SO之前已經被問過很多次了。請在發佈問題前查看重複內容，並閱讀文檔（http://getbootstrap.com） – ZimSystem

您只需要使用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>

來源

2017-03-09 15:04:41 neophyte

非常感謝給你。這正是我想要的 – pr3sto

很高興我可以幫助，但嘗試瞭解bootstrap網格系統我在答案中添加了一些資源。請檢查這些代碼 – neophyte

此代碼在編輯之前工作，並且之前發佈。 @neophyte，請修復它（或者我標記另一個答案爲正確） – pr3sto

<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>

來源

2017-03-09 15:06:48 Paul

您可以使用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是用於說明目的。做任何你需要做的事情。

來源

2017-03-09 15:07:17 hungerstar

這應該是被接受的答案。 – ZimSystem

不同屏幕上的div對齊

回答

相關問題