Question

如何在移动设备中隐藏边栏？

CSS：

.sidebar-nav {
    padding: 9px 0;
}

.sidebar-nav .nav-header {
    font-size: 18px;
    color:#FF9900;
}

HTML：

 <div class="container">  
            <div class="row">  
                <div class="col-md-3">  
                    <div class="well sidebar-nav"> 
                    <ul class="nav nav-list">   
                        <li class="nav-header">Content Management</li>  
                        <li><a href="../../=">test</a></li>  
                        <li><a href="../../">test2</a></li> 
                    </ul>  
                    </div><!--/.well -->  
                </div><!--/span-->
                <div class="col-md-9"> 
                    <div class="container">   
                        <div class="row">
                            .....
                       </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

        <div class="col-md-3 hidden-xs">

“移动”断点默认值为767px。要隐藏那个大小的东西，只需将.hidden-xs放在上面即可。没有必要做任何其他事情。如果您不希望它以小的最小宽度显示，请添加.hidden-xs .hidden-sm或者您只需添加.visible-md .visible-lg

http://jsbin.com/AmaVUcib/1/edit

Answer 2

将它放在你的css中，最好是在底部。这将隐藏任何小于651像素的屏幕的侧边栏。根据需要调整像素数。

@media screen (max-width: 650px) {
    .well .sidebar-nav {
        display: none;
    }
}

以下是包含更多信息https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

的链接

Answer 3

在引导程序4中，使用添加以下类来隐藏在xs和sm设备上

.d-none .d-sm-none .d-md-block

了解更多here

隐藏带有引导程序的侧边栏

3 个答案: