divを表示するためのブートストラップの崩壊は動作しますが、サイドアイテムには影響しませんでしたか？

Question

私はdivを表示するためにブートストラップの崩壊を使用していましたが、私がそれを使用しているときに、divが崩壊して開いたときにサイドアイテムが影響を受けるようになりました。どのように私は、サイドアイテムは文句を言わない彼らの位置に滞在する下って行くこと作るのですか、ここで

私が作る必要があり、ここで

Jsfiddle exampleは私のCSSコードの私の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> 

されている

.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; 
}