不同屏幕上的div对齐

问题描述：

如何在不同屏幕上实现此行为。（灰色矩形是一些内容的div）。假设图片1（左）是正常的，宽屏幕;图片2（中）小（上网本或平板电脑）屏幕;图片3（右）是手机屏幕。我使用bootstrap 3. 不同屏幕上的div对齐

你为什么要那样做？从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>

非常感谢给你。这正是我想要的 – 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>

答

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

这应该是被接受的答案。 – ZimSystem

不同屏幕上的div对齐

相关推荐