Настройка выпадающего меню ширины на авто

Question

Мой вопрос лучше всего описывается простым JSFiddle. Все, что я хочу сделать, это сделать мою ширину меню выпадающего меню зависящей от ее ширины содержимого, чтобы все метки параметров находились в одной строке без разрывов строк.

JSFiddle

<div> 
    <span style='cursor:pointer; float:right'> 
            <div class="btn-group pull-right"> 
             <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
              <span class="glyphicon glyphicon-cog"></span> 
    </button> 
    <ul style = 'padding:10px' class="dropdown-menu"> 
    <li class="dropdown-submenu"> 
     <input id="full_package_filter" type="checkbox" name="vehicle" checked>С полным пакетом документов<span class='useful_stat'></span> 
     <br> 
     <input id="not_full_package_filter" type="checkbox" name="vehicle" checked>С неполным пакетом документов<span class='useful_stat'></span> 
     <br> 
    </li> 
    <li class="dropdown-submenu"></li> 
    <li class="dropdown-submenu"></li> 
    <li class="dropdown-submenu"></li> 
    </ul> 
</div> 
</span> 
</div> 

Answer 1

white-space: nowrap; Попробуйте добавить правило к вашему ниспадающего меню.

.dropdown-submenu { 
    white-space: nowrap; 
}