How to make a menu in bootstrap-3?

Question

css

Is it possible to make the bootstrap-3 menu fit the width of the screen and not the parent component?
there is a need to organize the menu in this way
tried to implement in this way

<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>

nothing came out of this, even the drop-down menu does not work. Is it possible to make such a menu in bootstrap 3 using standard methods?

Answer 1

width: 100vw;
Seems like it should work

Answer 2

To move an element outside the parent, you need to make it absolute positioning or fixed, which can also work for a menu.
Another question is why? Maybe you should just move it outside the parent or make the parent full screen? With width: 100vw; or width: 100%;