当宽度属性消失时如何使Bootstrap响应div转换 [英] How to make Bootstrap responsive divs transition when their width property disappears
问题描述
我试图做的是让我的响应宽度 div s在失去它们的百分比时有一个转换 width ，所以没有太多的突然跳跃。例如，当一个页面的屏幕上显示
< div class =row>
< div class =col-md-3>
...
< / div>
< div class =col-md-3>
...
< / div>
< div class =col-md-3>
...
< / div>
< div class =col-md-3>
...
< / div>
< / div>
低于 992px code> div s失去它们的宽度：25％; 属性，实际上没有 width 属性。发生这种情况时，我需要平滑过渡到新的宽度（其中包含 div ）。
我试过的是
< div class =row >
< div class =col-md-3 transition-width>
...
< / div>
< div class =col-md-3 transition-width>
...
< / div>
< div class =col-md-3 transition-width>
...
< / div>
< div class =col-md-3 transition-width>
...
< / div>
< / div>
其中我所做的类叫做 transition-width 由
.transition-width {transition：width 1s ease-out; webkit-transition：宽度1s缓解; }
但由于某种原因，当我切换到断点时没有任何转换。任何想法为什么这是？为了实现我的目标，我需要做些什么？
当您调整窗口大小时，请查看此示例代码你会看到预期的过渡。这是你想要得到的吗？
当您使用所有 col-xx-xx 时，您将始终获得想要的百分比宽度...这个 class =col-xs-3 col-sm-3 col-md-3。
在这个演示中，宽度为25％。
这里的实际情况是，一般用户在设备上打开一个网站，该屏幕就是这样，用户不会看到这种转换效果。
我在892px处设置了一个媒体断点，以便进行测试。
What I'm trying to do is make my responsive-width divs have a transition when they lose their percentage width, so that there isn't so much of an abrupt jump. For instance, when the screen of a page with
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
<div class="col-md-3">
...
</div>
</div>
goes below 992px, the 4 inner divs lose their width:25%; property and in fact have no width property. When this happens, I want a smooth transition into their new width (which spans their containing div).
What I tried is
<div class="row">
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
<div class="col-md-3 transition-width">
...
</div>
</div>
where the class I made called transition-width is defined by
.transition-width { transition: width 1s ease-out; webkit-transition: width 1s ease-out; }
but for some reason there isn't any transition when I toggle over the breakpoint. Any idea why this is? What do I need to do instead to achieve my goal?
Have a look at this sample code, when you resize the window you will see the transition as expected. Is this what you were trying to get?
When you use all col-xx-xx you will always get the percentage width you want... like this class="col-xs-3 col-sm-3 col-md-3".
In this demo the bottom row divs always has a width of 25%.
Reality here is that a general user opens a website on a device and that screen is what it is, the user would not see this transition effect.
I set a media breakpoint at 892px to test at.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.bg-orange {
background-color: orangered;
}
.bg-green {
background-color: greenyellow;
}
.bg-violet {
background-color: blueviolet;
}
.transition-width {
transition: width 10s ease-out;
webkit-transition: width 10s ease-out;
}
@media(min-width:892px) {
div{width:100%;}
}
@media(max-width:892px) {
div{width:100%;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12"><br><br></div>
<div class="container col-lg-12">
<h3>Transition when resized.</h3>
<div class="row">
<div class="col-md-3 bg-primary">
...
</div>
<div class="col-md-3 bg-orange">
...
</div>
<div class="col-md-3 bg-violet">
...
</div>
<div class="col-md-3 bg-green">
...
</div>
</div>
<div class="container col-lg-12"><br><br></div>
<div class="row">
<div class="col-md-3 bg-primary transition-width">
...
</div>
<div class="col-md-3 bg-orange transition-width">
...
</div>
<div class="col-md-3 bg-violet transition-width">
...
</div>
<div class="col-md-3 bg-green transition-width">
...
</div>
</div>
<div class="container col-lg-12"><br><br></div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 bg-primary">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-orange">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-primary">
...
</div>
<div class="col-xs-3 col-sm-3 col-md-3 bg-orange">
...
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
这篇关于当宽度属性消失时如何使Bootstrap响应div转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
