Подзаголовок Bootstrap, чтобы растянуть весь экран и наложить всю страницу

Question

Я сделал JSFiddle, чтобы проиллюстрировать то, что у меня есть на данный момент. Пожалуйста, просмотрите мой код здесь:

Некоторые из моих CSS код сниппета:

.subnav { 
    display: none; 
    position: absolute; 
    //top: 58px; 
    background: #dfe6e8; 
    padding: 24px; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    transition: all .5s ease; 
} 
.subnav li { 
    margin-right: 0px !important; 
    min-width: 142px; 
} 
.subnav li a { 
    padding-bottom: 0px !important; 
    margin-bottom: 16px; 
} 
.subnav li:last-child a { 
    margin-bottom: 0px; 
} 
.has-dropdown:hover .subnav { 
    display: block; 
} 

У меня проблема сделать мой UL растянуть на весь экран. Вот что я пытаюсь достичь, как показано ниже:

Любая помощь будет оценена

Answer 1

Для достижения этой цели вы должны сделать несколько структурных и CSS изменений. Я отредактировал вашу скрипку и внес некоторые изменения в навигацию.

Html:

<div class="nav-container"> 
      <nav class="top-bar"> 
       <div class="container-fluid"> 
        <div class="row nav-menu"> 
         <div class="col-xs-12 columns"> 
          <a class="navbar-brand" href="index.html"><img alt="Logo" class="logo logo-light" src="img/logo-light.png"> <img alt="Logo" class="logo logo-dark" src="http://www.subcablenews.com/links/images2/telenor.gif"></a> 
          <ul class="menu navbar-right"> 
           <li> 
            <a href="#">ABOUT</a> 
           </li> 
           <li class="has-dropdown"> 
            <a href="#">PROGRAMMES</a> 
            <ul class="subnav"> 
             <li> 
              <a href="about.html">Programme 1</a> 
             </li> 
             <li> 
              <a href="about-2.html">Programme 2</a> 
             </li> 
             <li> 
              <a href="services.html">Programme 3</a> 
             </li> 
             <li> 
              <a href="services-2.html">Programme 4</a> 
             </li> 
            </ul> 
           </li> 
           <li class="has-dropdown"> 
            <a href="#">PROJECTS</a> 
            <div class="subnav subnav-halfwidth fullwidth"> 
             <div class="col-sm-4"> 
              <h6 class="alt-font">Project Lists</h6> 
              <ul class="subnav subnav-halfwidth"> 
               <li> 
                <a href="blog-masonry.html">Project 1</a> 
               </li> 
               <li> 
                <a href="blog-masonry-sidebar.html">Project 2</a> 
               </li> 
               <li> 
                <a href="blog.html">Project 3</a> 
               </li> 
               <li> 
                <a href="blog-large-image.html">Project 4</a> 
               </li> 
              </ul> 
             </div> 
             <div class="col-sm-4"> 
             <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div> 
             <div class="col-sm-4"> 
             <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div> 
            </div> 
           </li> 
           <li class="has-dropdown"> 
            <a href="#">MEDIA</a> 
            <ul class="subnav"> 
             <li> 
              <a href="projects.html">Media 1</a> 
             </li> 
             <li> 
              <a href="projects-2.html">Media 2</a> 
             </li> 
             <li> 
              <a href="project-single-2.html">Media 3</a> 
             </li> 
             <li> 
              <a href="project-single.html">Media 4</a> 
             </li> 
            </ul> 
           </li> 
           <li> 
            <a href="#">CONTACT</a> 
           </li> 
          </ul> 
          <ul class="social-icons text-right"> 
           <li> 
            <a href="#"><i class="icon social_twitter"></i></a> 
           </li> 
           <li> 
            <a href="#"><i class="icon social_facebook"></i></a> 
           </li> 
           <li> 
            <a href="#"><i class="icon social_instagram"></i></a> 
           </li> 
          </ul> 
         </div> 
        </div><!--end of row--> 
        <div class="mobile-toggle"> 
         <i class="icon icon_menu"></i> 
        </div> 
       </div><!--end of container--> 
      </nav> 
     </div> 

Extra Css:

.subnav.fullwidth{ 
    position: absolute; 
    right: -15px; 
    top: 58px; 
    width: 100vw; 
    background: #F6F4F4; 
    padding: 48px 64px 48px; 
    box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(113,111,111,.7); 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -o-transform: translateX(0); 
    transform: translateX(0); 
    -webkit-transition: opacity .3s 0s, visibility 0s 0s; 
    -moz-transition: opacity .3s 0s, visibility 0s 0s; 
    transition: opacity .3s 0s, visibility 0s 0s; 
    /* box-shadow: 1px 2px 5px #7D7D7D; */ 
} 
.row{margin:0} 
.top-bar .logo { 
    width: 150px; 
} 
.subnav li{float:none; display: block;} 

Вот Updated Fiddle. Убедитесь, что вы также проверили html. Потому что я тоже внес некоторые изменения. Read this, чтобы лучше понять навигацию по бутстрапу. Надеюсь, это вам поможет.

Answer 2

Это потому, что родительские элементы не имеют ширину 100%. Вы можете переопределить это, используя width:100vw; на любом элементе, который вы хотите использовать для полной ширины. Кроме того, попробуйте и запомните в следующий раз, чтобы включить только css в вашу скрипку, которая имеет отношение к html на вопрос. Многое для того, чтобы разобраться, кто-то пытается помочь, когда вы включаете всю таблицу стилей.