Задать вопрос

Как сделать меню в 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 стандартными методами сделать такое меню ?
  • Вопрос задан
  • 243 просмотра
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 2
@W3s
Frontend Developer
width: 100vw;
Вроде должно сработать
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Что бы вынести элемент за пределы родителя надо сделать ему абсолютное позиционирование или fixed что для меню может тоже подойти.
Другой вопрос зачем? Может стоит просто вынести его за пределы родителя или сделать родителя во весь экран? С помощью width: 100vw; или width: 100%;
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽