Bootstrap崩溃跳转过渡，没有填充/边距

Question

我正在尝试创建一个干净平滑的下拉菜单，当单击一个按钮时会向下扩展，但是当菜单下降时，我会遇到一种跳跃式的过渡。我在使用填充和/或边距之前遇到过这个bug。但是这次我没有使用边距或填充，但我仍然得到了错误。

这些是发生跳跃的屏幕抓取。垂直加载很好，并且所有元素都向下塌陷，没有突出，但是横向不会加载整个元素的UL并在末尾跳跃。见图：

所以你可以看到发生了什么我现在将附上相关的代码。 （请注意，我的代码在这个项目中占有一席之地。

HTML＆amp; CSS：

.unorderedList a{
  width:165px;
  border-top:0;
  border-bottom:0;
  padding:0;
  margin:0;
}
.unorderedList{
  list-style-type: none;
  border:1px solid grey;
  padding:0;
  padding-top:0px;
  text-align:right;
  position:absolute;
  top:65px;
}  
.settingsContainer{
  position:fixed;
  width:134px;
  top:10px;
  left:85%;
  margin:0;
  padding:0;
}   
.directionalMenu{
  position:absolute;
  top:0px;
  left:58%;
  margin:0;
  padding:0;
}    
.directionalMenu #textMap{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}
.directionalMenu #mapBut{
  width:79px;
}

<div class="settingsContainer">
  <div class="directionalMenu">
    <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span></a>
    <a href="/admin/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-cog"></span></a>
    <button type="button" class="btn btn-default btn-responsive" id="mapBut" data-toggle="collapse" data-target="#mapsList"><small><span style="vertical-align:middle" class="glyphicon glyphicon-triangle-bottom"></small>
    <a class="textMap">  Maps</a></span></button>
</div>
<div class="collapse" id=mapsList>
  <div>
    <ul class="unorderedList">
    {% for p in reset|getMapArr %}
      <li><a href="/QMSv2/{{p.slug}}/" class="btn btn-default border-fix">{{p.title}}</a></li>
    {% endfor %}
  </ul>
</div>
</div>




    
    
    

提前感谢您提供的任何帮助。

Answer 1

您不必要的 CSS 会导致错位和不当行为。

当您使用 Bootstrap 时，您应该相应地使用它，这将节省您的时间和精力：

代码段：

.btn-container {
  padding: 100px 0 0 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="btn-group btn-container" role="group" aria-label="...">
  <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span></a>
  <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-cog"></span></a>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Maps
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
      </li>
      <li><a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
        <a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

我将父级宽度设置为小于子级Div（包含要扩展的列表），这导致了扩展期间的截止部分。

将父Div大小增加到比修复此问题的子大1px，现在动画运行顺畅。