ブートストラップ3：固定幅ではない3列のレイアウトにカラムの内容を中央に配置する

Question

幅が固定されていない3列のレイアウトの中にnavbar（実際にはnavbarのブートストラップクラスを使用していません）を配置しようとしています。私はこれで見つけたアプローチをほとんど試してみましたが、誰も私のために働いていませんでした（おそらく私は何かをやっているかもしれません）。ここで

はHTMLです：

<div class="submenu-categories"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-lg-2 col-md-2"><span><a href="#">76 products</a></span></div> 
     <nav class="col-lg-8 col-md-8"> 
      <ul> 
      <li><a href="#">standard</a></li> 
      <li><a href="#">premium</a></li> 
      <li><a href="#">super premium</a></li> 
      <li><a href="#">ultra premium</a></li> 
      <li><a href="#">corporate</a></li> 
      </ul> 
     </nav> 
     <div class="col-lg-2 col-md-2"><span><a href="#">show all wines</a></span></div> 
     </div> 
    </div> 
    </div> 

はここSCSSです：

ul { 
    list-style-type: none; 
    margin: 0!important; 
    padding: 0; 
} 

nav { 
    ul { 
     margin:0; 
     li { 
      @media only screen and (min-width:768px) { 
       float:left; 
      } 

      text-transform: uppercase; 
      a { 
       &:hover { 
        text-decoration: none; 
       } 
      } 
     } 
    } 
} 

.submenu-categories { 
    background-color: #1c1c1c; 
    display: none; 
    height:5.9375em; 
    line-height:5.9375em; 
    opacity: 0.9; 
    padding: 0; 
    text-align: center; 

    @media only screen and (min-width:768px) { 
     display: block; 
    } 

    .ctn { 
     @media only screen and (min-width:1285px) { 
      padding:0 15em 0 7em; 
     } 
    }  

    nav { 
     border: 1px solid red; 
     ul { 

      li { 
       &.with-border { 
        a { 
         border-right:1px solid white; 
         padding-right:2em; 
        } 
       }     

       a { 
     color: white; 
        font-size: .75em; 
        font-weight: 600; 
        margin: 0 .5em 0 .5em; 
        text-transform: uppercase; 

        @media only screen and (min-width:830px) { 
         margin: 0 1.875em 0 1.875em; 
        } 

        &:hover { 
         border-bottom: 3px solid red; 
        } 
       } 
      } 
     } 
    } 

    span { 

     display: inline-block; 

     a { 
      color: #979797; 
      font-size: .75em; 
      font-weight: 600; 
      text-transform: uppercase;    

      &:hover { 
       text-decoration: underline !important; 
      } 
     } 
    }  
} 

はここpencodeです： http://codepen.io/anon/pen/wzvGmY

私は真ん中の列にメニューを中心に必要がありますが、私はちょうどすることができますそのナビにULを固定幅で渡さなくても、ULに固定しなくてもその要素を中心に置く方法はありますか？

Answer 1

これはあなたの後のことですか？私が作った http://codepen.io/panchroma/pen/ambkky

変更はあなたがCSS FlexBoxでそれを行うことができます

nav { 
ul { 
    text-align:center; /* new */ 
    li { 
    @media only screen and (min-width:768px) { 
     //float:left; /* new */ 
     display:inline-block; /* new */ 
    } 
... 
} 

Answer 2

ました。 floatをliから削除し、次のCSSを追加して動作させてください。

nav ul { 
    justify-content: center; 
    align-item: center; 
    display: flex; 
} 

ここにはWorking Exampleがあります。