本文介绍了当宽度属性消失时如何使Bootstrap响应div转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图做的是让我的响应宽度 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转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 06:07