html - Bootstrap 折叠跳跃过渡，无填充/边距

Question

我正在尝试创建一个干净平滑的下拉菜单，当单击按钮时它会展开，但是当菜单下拉时我会遇到一种跳跃式的过渡。我在使用填充和/或边距之前遇到过这个错误。然而这次我已经做到不使用边距或填充，但我仍然遇到错误。

这些是发生的跳跃的屏幕截图。垂直加载很好，所有元素都很好地向下折叠，没有抖动，但是水平它不会加载整个 UL 元素并在最后跳转。看图片:

所以你可以看到发生了什么，我现在将附上相关代码。 (请注意，我的代码在这个元素中有些乱七八糟。

HTML 和 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>