Question

我有一个包含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;
}

Answer 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;
   }
}

但是如果你只需要将列表分成列，这里是有用的＆gt;＆gt;＆gt; link

Answer 2

根据您昨天发表的评论，您已经注意到您希望桌面/平板电脑上有两列，但移动和宽度较小的一列。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

当您运行上述代码段时，您会注意到所有链接都排列在一列中。当您点击全屏运行代码段时，他们会展开为两列。

我还为无序列表中的订单项添加了一些CSS，以便在所有li标签的底部添加填充，但最后一个除了最后一个，以说明在移动视图中获得的奇数间距。你可以随意使用它来满足你的需求。

虽然您仍然没有在每列中指出了您想要的链接数量，但这应该可以帮助您入门。

Bootstrap页脚在移动设备上链接全宽和两列

2 个答案: