выпадающее меню, чтобы взять всю ширину тела - загрузочный блок

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. Таким образом, ваш контейнер и, следовательно, выпадающее меню остается выровненным с вашим логотипом, а триггер будет сдвинут вправо.