Nav在移動設備上有1列，中間尺寸的2列，以大屏幕爲中心的單行

Question

我正在嘗試創建僅顯示在移動設備上的單列（居中）的文本腳註 - 導航，兩在中型設備上使用居中文本的列和以桌面爲中心的單行。

HTML

<div class="container-fluid container-footer"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <ul class="nav nav-footer left"> 
      <li><a href="#">Link A</a></li> 
      <li><a href="#">Link B</a></li> 
      <li><a href="#">Link C with longer name</a></li> 
      <li><a href="#">Link D</a></li> 
      <li><a href="#">Link E</a></li> 
     </ul> 
     </div> 
     <div class="col-sm-6"> 
     <ul class="nav nav-footer right"> 
      <li><a href="#">Link F</a></li> 
      <li><a href="#">Link G</a></li> 
      <li><a href="#">Link H</a></li> 
      <li><a href="#">LINK I</a></li> 
     </ul> 
     </div> 
    </div> 
</div> 

CSS

.container-footer { 
    background-color: #e3e3e3; 
    text-align: center; 
    padding: 20px 0; 
    margin-top: 20px; 
} 
.container-footer a { 
    color: #464646; 
} 
.nav-footer { 
    margin: 0px auto; 
} 
.nav-footer li { 
    width: 100%; 
    text-align: center; 
} 
@media (min-width: 768px) { 
    .nav-footer li { 
     width: auto; 
     display: block;  
    } 
} 
@media (min-width: 992px) { 
     .nav-footer li { 
     width: auto; 
     display: inline-block;  
    } 
    .left { 
     text-align: right; 
    } 
    .right { 
     text-align: left; 
    } 
} 

這是接近我已經能夠得到：http://codepen.io/anon/pen/XbbyKK

在筆，它的所有作品除了大屏幕上的單行顯示（992px以上）外，我希望它。主要問題在於，因爲左欄中的項目比右欄中的項目多，所以整個菜單傾斜到屏幕的左側。

有可能是一個明顯的方法來做到這一點，我只是沒有看到，因爲我盯着這個太長時間了，所以任何建議將不勝感激！

Answer 1

你可以簡化一些事情。不需要那麼多的包裝div，或者用於打破2中的鏈接列表。這裏我使用multi column layout來獲得兩個中等大小的平衡列。對於更大的尺寸，我只是將其撤消，而且現在您的內聯塊技術可以正常工作，因爲列表不再分成兩半。

HTML

<div class="container-fluid container-footer"> 
     <ul class="nav nav-footer"> 
     <li><a href="#">Link A</a></li> 
     <li><a href="#">Link B</a></li> 
     <li><a href="#">Link C with longer name</a></li> 
     <li><a href="#">Link D</a></li> 
     <li><a href="#">Link E</a></li> 
     <li><a href="#">Link F</a></li> 
     <li><a href="#">Link G</a></li> 
     <li><a href="#">Link H</a></li> 
     <li><a href="#">LINK I</a></li> 
     </ul> 
</div> 

CSS

.container-footer { 
    background-color: #e3e3e3; 
    text-align: center; 
    padding: 20px 0; 
    margin-top: 20px; 
} 
.container-footer a { 
    color: #464646; 
} 
.nav-footer { 
    margin: 0px auto; 
} 
.nav-footer li { 
    width: 100%; 
    text-align: center; 
} 
@media (min-width: 768px) { 
    .nav-footer li { 
    width: auto; 
    } 
    .nav-footer { 
    -ms-columns:2; -moz-columns:2; -webkit-columns:2; columns:2; 
    } 
} 
@media (min-width: 992px) { 
    .nav-footer { 
    -ms-columns:auto; -moz-columns:auto; -webkit-columns:auto; columns:auto; 
    } 
    .nav-footer li { 
    display: inline-block; 
    } 
} 

Codepen：http://codepen.io/anon/pen/LVVXWz