Блог

Я хотел бы добавить выпадающий список в заголовок страницы. Я прочитал описание и попытался реализовать. Код:

 <div class="page-header">
 <div class="row">
   <div class="col-md-10">
     <h1>Page <small>Header</small></h1>
   </div>
   <div class="col-offset-md-10">
     <div class="dropdown">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
       <!--<span class="glyphicon glyphicon-cog"></span>-->
         Settings
         <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
       </ul>
     </div>
   </div>
 </div>
  

Проблема в том, что выпадающий список отображается в неправильном месте, решения, которые я нашел в Google, не работают для меня.
Я привел пример:http://www.bootply.com/UKR6JdGVXA

Итак, что я делаю с этим не так?

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

Вместо col-offset-md-10 класса используйте col-md-2 для заполнения оставшихся 2 столбцов сетки из 12 столбцов.

 <div class="col-md-2">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            <!--<span class="glyphicon glyphicon-cog"></span>-->Settings <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
            </li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
            </li>
        </ul>
    </div>
</div>
  

col-offset-... классы используются для увеличения левого поля, но они не меняют ширину. Ширина контролируется col-xx-yy классами.

Демонстрация:http://www.bootply.com/t6J4PKBsiR