如何使用Bootstrap 3更改元素的显示顺序 [英] How can I change the display order of elements using Bootstrap 3

问题描述

有人可以帮助我吗？我试图思考如何使用引导程序来做到这一点，任何人都有线索吗？我不知道如何更改元素的显示顺序，我想它会随着浮动和清除而变化。
请帮助我需要帮助。
我将Bootstrap 3用于响应式布局，如何仅使用CSS更改显示顺序？

解决方案

@skelly是对的可以使用push和pull类更改元素的显示顺序。这些类不能始终为您提供正确的解决方案。

对此还有很多其他问题，例如：需要能够在移动设备上交换网格

因为您要在移动设备（xs网格）/平板电脑视图（md网格）中更改100％宽度的行（黄色行），因此无法通过浮动和/或推拉解决此问题。 / p>

我还认为，仅在不修复某些参数的情况下，不能仅使用CSS来完成此操作。

当我考虑您的某些元素的高度已知/针对不同的视图而固定，我可以使用CSS和媒体查询来解决它： http：// bootply .com / 85303

css ：

  @media（最大宽度：768px）
 {
 .yellow {margin-top：-60px;} 
 .orange {margin-top：40px;} 
 .col-xs-12 {float：left;} 
} 
 @media（最小宽度：992px）和（最大宽度：1199px）
 {
 .col-md-12 {float：left;} 
 .darkgreen {float ：对; margin-top：-60px;} 
} 
 @media（最小宽度：1200px）
 {
 .blue {margin-top：-60px} 
} 
  

html ：

 < div class = container> 
< div class = row> 
< div class = col-lg-12 col-md-12 col-xs-12 style = background-color：red;>& nbsp;< / div> 
< / div> 
 
< div class = row> 
< div class = orange col-lg-12 col-md-8 col-xs-12 style = background-color：orange;>& nbsp;< / div> 
< div class = yellow col-lg-8 col-md-12 col-xs-12 style => 
< div class = row> 
< div class = col-lg-6 col-xs-12 style = background-color：yellow; height：40px;> 1< / div> 
< div class = col-lg-6 visible-lg style = background-color：yellow; height：40px;> 2< / div> 
< div class = col-lg-6 visible-lg style = background-color：yellow; height：40px;> 3< / div> 
< div class = col-lg-6 visible-lg style = background-color：yellow; height：40px;> 4< / div> 
< / div> 
< / div> 
< div class = darkgreen col-lg-4 col-md-4 col-xs-12 style = background-color：darkgreen;>& nbsp;< / div> 
< div class = pink col-lg-8 col-md-12 col-xs-12 style = background-color：pink;>& nbsp;< / div> 
< div class = blue col-lg-4 col-md-12 col-xs-12 style = background-color：blue; height：40px;>& nbsp;< / div> 
< / div> 
 
< / div> 
  

请注意，某些元素通过添加（负）顶边距来更改。我只有知道自己的身高，才能这样做。还要注意，我为 col-xs-12 和 col-xs-12 添加了一个float：left。

在实际情况下，您不知道高度，可以尝试使用javascript计算高度（可以对媒体查询使用response.js）并添加上边距。我不知道这是否能为您提供更好的解决方案，然后当您使用jQuery操作DOM时，请参阅：在调整大小时添加新行并更改列类

can somebody help me I am trying to think how can i do this using bootstrap, anyone have a clue? I dont know how can you change the display order of elements, i guess its playing around with floats and clears. Please help i need help. I am using Bootstrap 3 for the responsive layouts, how can you change the display order only using css?

解决方案

@skelly is right you could use the push and pull classes to change the display order of elements. These classes don't give you the right solution always.

There are many other questions about this, see for example: Need to be able to swap grid on mobile

Cause you want to change a 100% width row (the yellow row) in the mobile (xs grid) / tablet view (md grid) you can't solve this with floating and / or push and pull.

I also believe you can't do thsi with CSS only without fixing some parameters.

When i consider the height of some of your elements known / fixed for different views, i can solve it with css and media queries: http://bootply.com/85303

css:

@media (max-width: 768px)
{
.yellow {margin-top:-60px;}
.orange {margin-top:40px;}
.col-xs-12{float:left;}
}
@media (min-width: 992px) and (max-width:1199px)
{
    .col-md-12 {float:left;}
    .darkgreen{float:right; margin-top:-60px;}
}   
@media (min-width: 1200px)
{
.blue{margin-top:-60px}
}

html:

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div>
    </div>

    <div class="row">
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div>
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style="">
    <div class="row">
        <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div>
    </div>  
    </div>
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div>
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div>  
    </div>

</div>

Note some elements are changed by adding a (negative) top-margin. I can do this only when i know their height. Also notice i add a float:left for col-xs-12 and col-xs-12.

In the real situation where you don't know the height you could try to calculate it with javascript ( use respond.js for media queriesmaybe ) and add the top-margins. I don't know if this will give you a better solution then when you use jQuery to manipulate your DOM, see: Add new row and changing column classes on resize

这篇关于如何使用Bootstrap 3更改元素的显示顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！