不同屏幕上的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是用于说明目的。做任何你需要做的事情。