Bootstrap 3：在不固定寬度的3列布局上水平居中列內容

我試圖居中居中沒有固定寬度的三列布局中的導航欄（實際上我沒有使用導航欄的引導類）。我嘗試了幾乎所有的方法，我發現這一點，他們都沒有爲我工作（也很確定也許我正在做一些事情）。Bootstrap 3：在不固定寬度的3列布局上水平居中列內容

這裏的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上？

來源

2016-09-01 Lowtrux

這是你在追求什麼？ http://codepen.io/panchroma/pen/ambkky

我所做的改變是

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

來源

2016-09-01 14:56:43

釘！非常感謝大衛，現在我感覺有點愚蠢的原因實際上很明顯，你的回答給了我一些觀點，非常感謝！ – Lowtrux

我很高興這爲你工作@Lowtrux ...你永遠不想對問一個問題感到不好，一旦你看到他們，答案往往是明顯的;） –

你可以用CSS FlexBox做到這一點。從li刪除float並添加以下css使其工作。

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

這是Working Example。

來源

2016-09-01 15:01:49

非常感謝@穆罕默德這實際上工作，但爲了交叉瀏覽我將使用Davids的答案。 – Lowtrux

@Lowtrux歡迎您） –

Bootstrap 3：在不固定寬度的3列布局上水平居中列內容

回答

相關問題