引导折叠显示一个div工作，但如何使它不影响侧项？

Question

我使用引导折叠来显示div，但是当我使用它时，侧项会受到影响，就像在div被折叠打开时下降一样。我怎样才能使副业不会下降，就会停留在他们的位置上

这里我做了一个Jsfiddle示例

这是我的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;
}