Bootstrap полная ширина подменю с помощью yamm.стиль CSS

Я использую yamm.css для моих мега подменю.

Я требую, чтобы подменю охватывало всю ширину всей страницы, а затем ссылки по центру внутри контейнера.

вот мой код:

http://jsfiddle.net/DHQfz/17/

Если вы развернете экран, затем нажмите на ссылку с подменю, вы увидите, что мне нужно получить охват по всей ширине экрана и ссылки по центру в контейнере 1200px

надеюсь, вы можете помочь,

   <li class="dropdown yamm-fw buyingNav">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle subMenu">Link sub nav <b   class="caret"></b>
      </a><ul class="dropdown-menu"> </ul>
  </li>

Ура

6
css drop-down-menu html twitter-bootstrap

1 ответов

сначала вам нужно установить раскрывающийся список на 100% ширину и расположить его полностью влево.

.yamm .container .dropdown-menu {
    left: 0;
    width: 100%;
}

для этого .container не должно быть position: relative что он имеет сейчас, иначе раскрывающийся список всегда будет располагаться только на левой границе контейнера. Итак:

.yamm .container {
    position: static;
}

тогда вам нужно убедиться, что внутренности выпадающего списка только так широки, как они должны быть, и центрировать их. Вы можете сделать это, установив его до display: inline-block. Теперь это займет ровно столько же. ширина по мере необходимости вместо полной ширины страницы. Тем не менее, он выравнивается слева, поэтому добавьте text-align: center до .dropdown-menu для центрирования содержимого.

конечный результат:

.yamm .container {
    position: static;
}

.yamm .container .dropdown-menu {
    left: 0;
    text-align: center;
    width: 100%;
}

.yamm .dropdown-menu > li {
    display: inline-block;   
}

рабочий jsFiddle:http://jsfiddle.net/DHQfz/18/

3