Javascript 引导切换页脚

我试着在移动平台上隐藏页脚列，当按下title打开时。有没有办法在不添加任何javascript的情况下使用bootstrap实现这一点

我的代码是：

<div class="col-sm-7 five-three">
<div class="row">
    <div class="col-sm-4">
        <h4>Company</h4>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </div>
    <div class="col-sm-4">
        <h4>Why buy from us</h4>
        <ul>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">Secure Shopping</a></li>
        </ul>
    </div>  
    <div class="col-sm-4">
        <h4>My account</h4>
        <ul>
            <li><a href="{{store url='customer/account/login/'}}">Sign In</a></li>
            <li><a href="{{store url='checkout/cart/'}}">View Cart</a></li>
        </ul>
    </div>
</div>

单位




为什么要向我们购买




我的帐户

---

您可以将

隐藏的xs

和

隐藏的sm

类添加到页脚，这样它就不会显示在小于963px的屏幕上。

如果仅通过引导，您的意思是仅通过CSS，我可以为您提供一个我刚才使用过的解决方案

使用一些css将tabindex添加到h4标记中可以做到这一点，但这可能不足以满足交叉浏览器依赖性和其他要求，请谨慎使用

    <div class="col-sm-7 five-three">
<div class="row">
    <div class="col-sm-4">
        <h4 tabindex="0">Company</h4>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </div>
    <div class="col-sm-4" >
        <h4 tabindex="0">Why buy from us</h4>
        <ul>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">Secure Shopping</a></li>
        </ul>
    </div>  
    <div class="col-sm-4">
        <h4 tabindex="0">My account</h4>
        <ul>
            <li><a href="{{store url='customer/account/login/'}}">Sign In</a></li>
            <li><a href="{{store url='checkout/cart/'}}">View Cart</a></li>
        </ul>
    </div>
</div>

您可以使用媒体查询（css）使用您定义的新规则隐藏列。 这里有一个例子： html:

---

既然你已经有了一个解决方案，为什么还要尝试重新创造呢。我的代码在页脚上，我只需要隐藏ul内容并保留标题，当客户按下标题ul时就会显示。我知道这一点，但我需要可折叠，只保留标题，即h4标记您也可以在

ul

上使用这些类。（或任何其他元素）在我使用jquery隐藏ul内容之前，好的，但是有没有办法只使用引导功能来隐藏ul内容？你想要做的，即点击后做一些事情，不可能只使用CSS。不是关于CSS，我知道引导功能有一些东西，类似于可折叠的东西谢谢，但是我如何才能使内容只在手机上隐藏？正如我所说的媒体查询。更新了答案和小提琴。

    @media screen and (max-width: 768px) {
    .five-three ul {
        display:none;
    }
    .five-three h4:focus + ul {
        display:block;
    }
    }

<div class="row">
    <div class="col-sm-4 hide"> <!-- Pls see that I add a style name : hide -->
        <ul>
            <li><a href="#">Something</a></li>
            <li><a href="#">Another thing</a></li>
        </ul>
    </div>
</div>

@media screen and (max-width: 768px) {
   /*I take max-width: 768px because of bootstrap : sm is for 768px too*/
  .hide {
    display: none !important; /*You don't need !important if you load this stylesheet after you main one*/
  }
}