更改位置媒体查询时引导3动画列 [英] Bootstrap 3 animated columns when changing position media queries

问题描述

.bg1 {
    background: #111;
    padding:40px;
    margin:10px;
}

.bg2 {
    background: #222;
    padding:40px;
    margin:10px;
}

.bg3 {
    background: #333;
    padding:40px;
    margin:10px;
}

.bg4 {
    background: #444;
    padding:40px;
    margin:10px;
}

.bg5 {
    background: #555;
    padding:40px;
    margin:10px;
}

.bg6 {
    background: #666;
    padding:40px;
    margin:10px;
}

.bg7 {
    background: #777;
    padding:40px;
    margin:10px;
}

.bg8 {
    background: #888;
    padding:40px;
    margin:10px;
}

.bg9 {
    background: #999;
    padding:40px;
    margin:10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg1"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg2"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg3"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg4"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg5"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg6"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg7"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg8"> </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-6 col-lg-4">
      <div class=" bg9"> </div>
    </div>
  </div>
</div>

链接: http://jsfiddle.net/milindex/j1okznby/

我们也可以在此站点上创建列以更改媒体查询中的位置，并使其生效:

We can make the columns to change positions in media Queries, do it with an effect, also on this site:

我们可以看到，当他们更改响应式设计模式时，我已经在以下网站上看到: http://www .joymovil.com/激活媒体查询"后，它会动态更改位置和非常时尚的动画.

We Can see that when they change a responsive design mode, I have seen on this web site: http://www.joymovil.com/ upon activation Media Queries, it changes dynamically positions and a very stylish animation.

推荐答案

基于我发现的内容，以完成您所要的内容，您需要absolute在页面上放置每个列，然后根据在媒体查询宽度上，您将使用transition属性移动列.这是一个简单的示例，其中带有 Js Fiddle可供查看.我从 CSS技巧中获得了示例.

Based on what I've found in order to accomplish what you are asking you will need to absolute position each of your columns on the page and then based on the media query widths you will use the transition property to move the columns. Here is a simple example with a Js Fiddle to view. I got the example from CSS Tricks.

HTML

<div class="dont-move">Doesnt move</div>
<div class="thing-that-moves">moves</div>

CSS

body {
    padding:0;
    margin:0;
}
.dont-move {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}
.thing-that-moves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 100px;
  left: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
@media (min-width: 400px) {
  .thing-that-moves {
    left: 150px;
    top: 0;
    background-color: lightgray;
  }
}

不幸的是，我不确定使用引导框架是否可以对自身的框架进行一些严重的自定义. Bootstrap将网格系统与自己的媒体查询一起使用，并且不使用任何定位元素(据我所知).希望有帮助.

Unfortunately I am not sure if this is possible using the bootstrap frame work with out some serious customization to the frame work it self. Bootstrap uses the grid system with its own media queries and does not use any positioning elements (that I am aware of). Hope that helps.

这篇关于更改位置媒体查询时引导3动画列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！