ブートストラップフルスクリーンを引き伸ばし、ページ全体をオーバーレイするサブメニュー

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を作るために問題を抱えています。ここで私は以下のように達成しようとしているものです：

すべてのヘルプは、あなたは、いくつかの構造とCSSの変更を加える必要があり、これを達成するために

Answer 1

をいただければ幸いです。私はあなたのフィドルを編集し、ナビゲーションにいくつかの変更を加えました。

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> 

エキストラの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;を使用してこれをオーバーライドすることができます。また、次の時間を覚えておいて、問題のhtmlに関連するあなたのフィドルにのみcssを含めるようにしてください。スタイルシート全体を含めるときに助けようとしている人のために整理するのは大変です。