2014-09-21 139 views
0

我想要顯示菜單上的<i class="fa fa-chevron-down"></i>點擊。 我正在使用引導程序3. 問題是菜單隱藏在div的內部。 我想顯示div以上的菜單。 我的代碼是在這裏:http://jsfiddle.net/xrcwrn/o9txgsbz/菜單被隱藏在div

代碼

<div class="thumbnail"> 
    <div class="media"> 
     <a class="pull-left" href="#"> 
     <img class="media-object" src="" alt="Image" /> 
     </a> 
     <div class="pull-right" style="color: #c1c1c1"> 
      <ul> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         <i class="fa fa-chevron-down"></i> 
        </a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="topstory">delete</a></li> 
         <li><a href="findfriends">Find Friends</a> </li> 
         <li><a href="settings">Settings</a></li> 
         <li><a href="logout">Logout</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div class="media-body"> 
      <div class="media-heading"> 
       <strong> 
        <a href=profile?id=23">ABCD EFgh</a> 
       </strong> 
      </div> 
      <div class="media-heading" style="font-size: 9px">12/13/14</div> 
     </div> 
     <div> 
      Hello sdf asdf asdf asdf asdf asdf asdf 
     </div> 
    </div> 
</div> 

回答

1

您需要更改一些規則:

.dropdown-menu { 
    top: initial; 
    left: initial; 
    right: 0; 
} 

.dropdown { 
    position: static; 
} 

見這裏:http://jsfiddle.net/o9txgsbz/2/

+0

菜單的某些部分在.thumbnail之外。我們如何才能在.thumbnail中加入 – xrcwrn 2014-09-22 06:50:34

0

菜單隱藏在監守類media元素具有overflow:hidden所以當菜單出現溢出的部分是隱藏的。
您可以給overflow: visible添加媒體元素以使菜單可見。
看到這個
http://jsfiddle.net/o9txgsbz/1/

+0

可我們的媒體區域打開菜單。菜單在媒體邊界 – xrcwrn 2014-09-21 11:53:17

+0

之外,因爲在'dropdown = menu'類中,'left'爲0.在css中改變左邊的值以調整菜單位置。 – 2014-09-21 11:58:26

+0

感謝您的commet – xrcwrn 2014-09-21 12:01:19