当宽度属性消失时，如何使 Bootstrap 响应式 div 转换
Posted
技术标签:
【中文标题】当宽度属性消失时，如何使 Bootstrap 响应式 div 转换【英文标题】：How to make Bootstrap responsive divs transition when their width property disappears 【发布时间】：2015-09-09 17:36:37 【问题描述】：我想要做的是让我的响应宽度divs 在他们失去他们的百分比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，4 个内部divs 失去了width:25%; 属性，实际上没有width 属性。发生这种情况时，我希望顺利过渡到他们的新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: width 1s ease-out;
但由于某种原因，当我切换断点时没有任何转换。知道这是为什么吗？我需要做什么来实现我的目标？
【问题讨论】：
Animate bootstrap columns 的可能重复项 不仅仅是width 在那个断点发生变化。这也是他们的float 属性。
您好，您的意思是当您手动调整窗口大小时？
【参考方案1】：
看看这个示例代码，当你调整窗口大小时，你会看到预期的过渡。这是你想要得到的吗？
当你使用所有col-xx-xx 时，你总是会得到你想要的百分比宽度......就像这样class="col-xs-3 col-sm-3 col-md-3"。
在此演示中，底行 div 的宽度始终为 25%。
这里的现实是，一般用户在设备上打开一个网站，屏幕就是这样，用户不会看到这种过渡效果。
我在 892px 处设置了一个媒体断点来进行测试。
<!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)
divwidth:100%;
@media(max-width:892px)
divwidth: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 转换的主要内容，如果未能解决你的问题，请参考以下文章