Bootstrap 页脚链接全宽和移动设备上的两列答案

【问题标题】：Bootstrap footer links full width and two column on mobileBootstrap 页脚链接全宽和移动设备上的两列
【发布时间】：2016-04-01 01:45:21
【问题描述】：

我有一个带有 7 个链接的页脚，我以桌面为中心。在移动设备上，我希望这些链接以一列居中的方式将一个链接堆叠在另一个之上，但是它们目前以 2 行 3 列的形式显示为内联，现在 1 列显示为 1。

HTML

<div class="col-md-12 pad-top text-center">           
  <ul class="footer-links">
    <li><a href="#">LINK 1</a></li>
    <li><a href="#">LINK 2</a></li>
    <li><a href="#">LINK 3</a></li>
    <li><a href="#">LINK 4</a></li>
    <li><a href="#">LINK 5</a></li>
    <li><a href="#">LINK 6</a></li>
    <li><a href="#">LINK 7</a></li>
  </ul>
</div>

CSS

.footer-links {
  color:#ffffff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display:inline-block;
  font-family: HelveticaNeu;
}

【问题讨论】：

如果空间不够，它实际上会跳转到 2 行（或更多），但请告诉我们，您尝试了什么来实现您想要的......？
除了上面的评论，你说你希望结果在移动端有两列，但是你希望每列有多少个链接？
我支持@MattD 的评论 - 一个有效的问题...顺便说一下，如果您知道引导程序的网格系统，您就会知道只需将列表拆分（无论您想要的位置）为 2具有col-xs-6 类的 div 每个都可以解决这个问题，如果这是你想要的......
从台式机/平板电脑上的一列到移动设备上的两列以获取页脚中的链接对我来说很奇怪。通常，您希望在移动设备上实现更线性的布局，因此在台式机/平板电脑上设置两列，然后在移动设备上将它们显示为一列会更有意义。
好吧，我现在意识到把它分成两列是愚蠢的，我怎么能把它合二为一呢？只是将一列放在移动堆叠所有链接的中心。

标签： html twitter-bootstrap css twitter-bootstrap-3 responsive-design

【解决方案1】：

例如，当用户从移动设备观看时，您可以将类添加到将隐藏它的页脚。然后用两个列表取消隐藏两列。

也许这是一个有点笨拙的解决方案，但它也是一个比较好的解决方案;）

HTML

<div class="col-lg-12 col-md-12 pad-top text-center hideBlock">
   <ul class="footer-links">
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
      <li><a href="#">LINK 4</a></li>
      <li><a href="#">LINK 5</a></li>
      <li><a href="#">LINK 6</a></li>
      <li><a href="#">LINK 7</a></li>
   </ul>
</div>
<div class="col-xs-6 pad-top text-center unhideBlock">
   <ul class="footer-links">
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
   </ul>
</div>
<div class="col-xs-6 pad-top text-center unhideBlock">
   <ul class="footer-links">
      <li><a href="#">LINK 4</a></li>
      <li><a href="#">LINK 5</a></li>
      <li><a href="#">LINK 6</a></li>
      <li><a href="#">LINK 7</a></li>
   </ul>
</div>

CSS

@media (min-width: 768px){
   .hideBlock {
     display: block;
   }

   .unhideBlock {
     display: none;
   }
}

@media (max-width: 768px){
   .hideBlock {
     display: none;
   }

   .unhideBlock {
     display: block;
   }
}

但是，如果您只需要将列表分成列，这里很有用>>> link

【讨论】：

Bootstrap 已经有响应式实用程序来处理在某些视口宽度下显示和隐藏元素。无需编写自定义 CSS 来处理此问题。 getbootstrap.com/css/#responsive-utilities

【解决方案2】：

根据您昨天的评论，您已经注意到您希望在台式机/平板电脑上设置两列，但在移动设备和更小的宽度上设置一列。

这很容易实现，您只需将链接分成两个单独的 div。

.footer-links {
  color: #ffffff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  font-family: HelveticaNeu;
}

.footer-links li:not(:last-child) {
  padding-bottom: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6 pad-top text-center">
  <ul class="footer-links">
    <li><a href="#">LINK 1</a>
    </li>
    <li><a href="#">LINK 2</a>
    </li>
    <li><a href="#">LINK 3</a>
    </li>
    <li><a href="#">LINK 4</a>
    </li>
  </ul>
</div>
<div class="col-sm-6 pad-top text-center">
  <ul class="footer-links">
    <li><a href="#">LINK 5</a>
    </li>
    <li><a href="#">LINK 6</a>
    </li>
    <li><a href="#">LINK 7</a>
    </li>
  </ul>
</div>

当你运行上面的 sn-p 时，你会注意到所有的链接都排列在一个单独的列中。当您单击以全屏运行 sn-p 时，它们将展开为两列。

我还为无序列表中的行项目添加了一些 CSS，以在除最后一个之外的所有 li 标签的底部添加填充，以解决您在移动视图中获得的奇数间距。您可以根据自己的需要进行调整。

虽然您还没有说明您希望在每列中有多少个链接，但这应该可以帮助您开始。

【讨论】：