Как сделать меню в bootstrap -3?

Есть ли возможность сделать меню bootstrap-3 на ширину экрана, а не родительского компонента?
есть необходимость организовать меню таким образом d194131678cd4b9890070e7173ba3523.jpe
пытался реализовать таким образом
<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav col-lg-10 col-md-10 col-sm-20 col-xs-20">
							<li><a href="#">Главная/a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Для него </a>
								<ul class="dropdown-menu">
									<ul class="nav nav-pills nav-stacked nav-tabs">
										<li class="active"><a href="#home_him" data-toggle="tab">Главная</a></li>
										<li><a href="#profile_him" data-toggle="tab">Профиль</a></li>
										<li><a href="#messages_him" data-toggle="tab">Сообщения</a></li>
										<li><a href="#settings_him" data-toggle="tab">Настройки</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="home_him">
											<li><a href="#">Действие</a></li>
											<li><a href="#">Другое действие</a></li>
											<li><a href="#">Что-то еще</a></li>
										</div>
										<div class="tab-pane" id="profile_him">
											<li><a href="#">Действие</a></li>
											<li><a href="#">Другое действие</a></li>
											<li><a href="#">Что-то еще</a></li>
										</div>
										<div class="tab-pane" id="messages_him">
											<li><a href="#">Действие</a></li>
											<li><a href="#">Другое действие</a></li>
											<li><a href="#">Что-то еще</a></li>
										</div>
										<div class="tab-pane" id="settings_him">
											<li><a href="#">Действие</a></li>
											<li><a href="#">Другое действие</a></li>
											<li><a href="#">Что-то еще</a></li>
										</div>
									</div>
								</ul>
							</li> 
                                                       ...
                                               </ul>
                                       </div>
                                 </div>

из этого ни чего не вышло даже выпадающее меню не работает можно в bootstrap 3 стандартными методами сделать такое меню ?
  • Вопрос задан
  • 239 просмотров
Пригласить эксперта
Ответы на вопрос 2
@W3s
Frontend Developer
width: 100vw;
Вроде должно сработать
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Что бы вынести элемент за пределы родителя надо сделать ему абсолютное позиционирование или fixed что для меню может тоже подойти.
Другой вопрос зачем? Может стоит просто вынести его за пределы родителя или сделать родителя во весь экран? С помощью width: 100vw; или width: 100%;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы