Как сделать полноэкранное меню в bootstrap?

Question

[Дмитрий Шалимов]

Есть необходимость сделать выпадающее меню во всю ширину окна. Верстаю на Bootstrap 3.

Если в css прописать

.dropdown-menu{ width: 100%}

То ширина выпадающего меню будет равна ширине родительского блока

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="collapse navbar-collapse" id="responsive-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Пункт 1
                    </a>
                	    <ul class="dropdown-menu">
                		        <li><a href="#">Подпункт 1</a></li>
                        		<li><a href="#">Подпункт 2</a></li>
                		        <li><a href="#">Подпункт 3</a></li>
                    	</ul>
                </li>
                <li><a href="#">Пункт 2</a></li>
                <li><a href="#">Пункт 3</a></li>
            </ul>
        </div>
    </div>
</div>

Как можно реализовать выпадающее меню, шириной в весь экран, не сильно изменяя код?

Answer 1

[Tony Realovich]

Убрать div.container

Comments

[Дмитрий Шалимов]

div.container выравнивает основные пункты меню. Если его убрать, то они будут просто выравниваться по краю страницы. Под родительским блоком я имел в виду .

[Дмитрий Шалимов]

Владимир Галынский: 1)И как расшифровывать этот ответ 2)Бессмысленно строгать class=container, а container-fluid подавно. Проблема заключается в том, что выпадающее меню в botstrap 3 реализовано с помощью дочернего списка внутри самого пункта меню. Если задать выпадающему меню ширину 100%, то он будет равен ширине родительского блока li class ="dropdown". Поставлена задача - сделать ширину выпадающего меню равной ширине окна. Если использовать Jquery

$(document).ready(function(){
$(".dropdown-menu").width($(window).width());
$(window).resize(function(){$(".dropdown-menu").width($(window).width());});
});

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