Html 移动设备上的引导页脚链接全宽和两列

我有一个页脚与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>

<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>

---

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

也许这是一个有点笨拙的解决方案，但也是一个相对较好的解决方案；）

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>

<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>

---

但是，如果您只需要将列表分成几列，那么根据您昨天的评论，这里是有用的>>>

，您已经注意到您希望在台式机/平板电脑上有两列，但在移动设备上有一列，宽度更小

这相当容易实现，只需将链接拆分为两个单独的div即可。

.footer链接{
颜色：#ffffff；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
显示：内联块；
字体系列：HelveticaNeu；
}
.footer链接li:非（：最后一个子项）{
垫底：4px；
}

如果空间不够，它实际上会跳转到2行（或更多）行，但告诉我们，你试图达到你想要的目的是什么…？除了上面的评论，你说你希望结果在手机上分为两列，但你希望每列有多少链接？我支持@MattD的评论-一个有效的问题。。。顺便说一句，如果你知道bootstrap的网格系统，你就会知道简单地将列表拆分成两个div，class

col-xs-6

，每个div都有可能解决这个问题，如果这是你想要的…从台式机/平板电脑上的一列到移动设备上的两列，在页脚中查找链接，我觉得很奇怪。通常情况下，你希望在移动设备上有一个更线性的布局，所以在台式机/平板电脑上有两列，然后在移动设备上显示为一列会更有意义。好吧，我现在意识到将其作为两列是愚蠢的，我怎么能将其作为一列？只需在移动设备上居中放置一列，即可堆叠所有链接。Bootstrap已经具有响应实用程序，可以处理在特定视口宽度下显示和隐藏元素。无需编写自定义CSS来处理此问题。