bootstrap 4将ul列表转换为移动列

【问题标题】：bootstrap 4 convert ul list to a column for mobilebootstrap 4将ul列表转换为移动列
【发布时间】：2018-08-25 22:38:08
【问题描述】：

我正在使用 bootstrap 4。我有一个看起来像这样的链接列表。

这是我的html

            <ul class="list-inline footer-main-links">
            <li class="list-inline-item"><a href="/shop/">Shop</a></li>
            <li class="list-inline-item"><a href="/review/">Reviews</a></li>
            <li class="list-inline-item"><a href="/faq/">FAQ</a></li>
            ...

如何使智能手机的列表如下图所示？我想充分利用 bootstrap 4 类/实用程序。

【问题讨论】：

标签： css twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

您可以将nav 与响应式网格列一起使用...

     <ul class="nav footer-main-links row text-center text-uppercase">
            <li class="nav-item col-6 col-md"><a href="/shop/">Shop</a></li>
            <li class="nav-item col-6 col-md"><a href="/review/">Reviews</a></li>
            <li class="nav-item col-6 col-md"><a href="/faq/">FAQ</a></li>
            <li class="nav-item col-6 col-md"><a href="/review/">Returns</a></li>
            <li class="nav-item col-6 col-md"><a href="/review/">Story</a></li>
            <li class="nav-item col-6 col-md"><a href="/review/">Partner</a></li>
            <li class="nav-item col-6 col-md"><a href="/review/">Refer a friend</a></li>
     </ul>

演示：https://www.codeply.com/go/LFROz8QVsi

【讨论】：