导航在移动设备上为 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;
  }
}

代码笔：http://codepen.io/anon/pen/LVVXWz

导航在移动设备上为 1 列，在中型设备上为 2 列，在大屏幕上为单行居中

Nav with 1 column on mobile, 2 columns on mid-size, single line centered on large screens

css

navigationbar

twitter-bootstrap-3