下拉菜單拿身體的整個寬度 - 引導

Question

我試圖讓horizontal dropdown菜單拿身體的整個寬度。 dropdown-menu應該從下面的小提琴的左邊開始。

FIDDLE HERE

的Sub List 1應該從Logo+Text區域開始，並應流，直到li繼續。

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div> 
       <span>Logo+Text</span> 
      </div> 
      <div class="btn-group" style="margin-left: 200px"> 
       <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a> 
       <ul class="dropdown-menu" role="menu"> 
        <li> 
         <a href="#">Sub List 1</a> 
        </li> 
        <li> 
         <a href="#">Sub List 2</a> 
        </li> 
        <li> 
         <a href="#">Sub List 3</a> 
        </li> 
        <li> 
         <a href="#">Sub List 4</a> 
        </li> 
        <li> 
         <a href="#">Sub List 5</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

只需使用position: initial;到btn-group父類。如果不工作，則使用!important。

查看我的JSFIDDLE

的良好實踐演示爲：has_dropdown添加一個新的類btn-group。然後由has_dropdown類風格。試試我的演示。

Answer 2

一種方式做，這將是移動你的style="margin-left: 200px" CSS聲明的dropdown-toggle錨項目，而不是btn-group。這樣，當觸發器被推向右側時，您的容器以及您的下拉菜單將與您的徽標保持一致。