html - bootstrap 崩溃以显示它工作的 div 但如何使其不影响副元素？

Question

我正在使用 bootstrap collapse 来显示一个 div，但是当我使用它时，当一个 div 通过折叠打开时，副元素会受到影响，就像下降一样。我如何使副产品不会掉落并留在原位

这里我制作了一个Jsfiddle example

这是我的html代码

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="right-lower-container">
  <div class="testing-notification">
    <span class="glyphicon glyphicon-comment notification-bar" data-toggle="collapse" data-target="#testing1"></span>
    <div id="testing1" class="collapse notification-block">
      testing 1
    </div>
  </div>
  <span class="btn glyphicon glyphicon-bell notification-bar" data-toggle="collapse" data-target="#testing2"></span>
  <div id="testing2" class="collapse notification-block">
    testing2
  </div>
  <a class="option-font" href="#">
    <span>
                                new items
                            </span>
  </a>
  <a class="option-font" href="#">
    <span class="glyphicon glyphicon-search">
                                search
                            </span>
  </a>
</div>

这是我的CSS代码

.right-lower-container {
  height: 40%;
  width: 100%;
  display: block;
  vertical-align: top;
  text-align: right;
}

.notification-bar {
  color: black;
  margin-right: 2.5%;
}

.notification-bar:hover {
  color: gray;
}

.notification-block {
  width: 100px;
  height: 100px;
}

.testing-notification {
  display: inline-block;
  width: 20%;
}

#testing1,#testing2{
  background-color:red;
  width:100px;
  height:200px;
}

Answer 1

添加以下CSS:

.option-font,
.notification-bar,
.testing-notification {
    display: inline-block;
    vertical-align: top;
}