Question

我尝试将页脚列隐藏在移动平台上，并按下标题打开。有没有办法在没有添加任何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>

Answer 1

您可以将hidden-xs和hidden-sm类添加到页脚，因此它不会显示在比963px窄的屏幕上。

Answer 2

如果单独使用Bootstrap，你的意思是单独的CSS，我可以给你一个我以前用过的解决方案

https://jsfiddle.net/arunzo/ybgayvL8/

使用一些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（你可能想把它放在你的媒体查询中，五三是用于识别sakes考虑添加一个更多的语义类名称）：

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

Answer 3

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

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

css（新样式表）：

@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*/
  }
}

Bootstrap切换页脚

3 个答案: