防止引導列崩潰

Question

我正在使用引導程序並在頁面頂部創建了一個導航欄。導航欄分爲3列。中間的列有一個菜單，裏面隱藏着顯示器：CSS內部沒有屬性。當我將鼠標懸停在菜單圖標上時，出現菜單。我遇到的問題是，當菜單被隱藏時，列會摺疊並將列右移到中間位置。我正在使用jQuery來顯示和隱藏懸停的菜單。如果有人可以請告訴我如何防止菜單被隱藏時該列崩潰，我將不勝感激。謝謝。

Answer 1

第三列中的2個div只需要添加一個拉右類。將類添加到div後，需要交換divs位置。

<div id="main-menu"> 
<div id="navbar" class="navbar navbar-inverse"> 
    <div id="name" class="col-xs-12 col-sm-4 col-md-4"> 
    <h1 class="h3">website name</h1> 
    </div> 
    <ul class="col-xs-12 col-sm-4 list-inline pagination-large" id="menu"> 
    <li class="active list-inline-item"><a href="index.php">Home</a></li> 
    <li class="list-inline-item"><a href="#" class="login">Login</a></li> 
    <li class="list-inline-item"><a href="shop.php">Shop</a></li> 
    <li class="list-inline-item"><a href="#">Blog</a></li> 
    <li class="list-inline-item"><a href="contact.php">Contact</a></li> 
    </ul> 
    <div class=" col-xs-6 col-sm-2 pull-right" id="burger"> 
    <img src="Bootstrap/glyphicons_free/glyphicons/png/glyphicons-159-show-lines.png" class="open pull-right" alt="burger menu" title="Burger Menu"> 
    <p>Menu</p> 
    </div> 
    <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 pull-right" id="cart"> 
    <img src="images/cart.png" alt="Open Shopping Cart" title="Open Cart"> 
    </div> 
</div> 

演示：Jsfiddle