Question

所以我使用bootstrap创建了一个导航菜单，但是当我尝试根据媒体查询隐藏导航头内的div时，它无法工作。

关注的div有.hide-on-desktop类。

HTML：

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="cls2">
            <i class="fa fa-facebook" aria-hidden="true"></i>
            <i class="fa fa-youtube-play" aria-hidden="true"></i>
            <i class="fa fa-twitter" aria-hidden="true"></i>
            <i class="fa fa-google-plus" aria-hidden="true"></i>
            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
            <i class="fa fa-instagram" aria-hidden="true"></i>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <i class="fa fa-tumblr" aria-hidden="true"></i>
            <i class="fa fa-soundcloud" aria-hidden="true"></i>
            <i class="fa fa-vimeo-square" aria-hidden="true"></i>
            <i class="fa fa-linkedin" aria-hidden="true"></i>
            <i class="fa fa-rss" aria-hidden="true"></i>
            <div class="hide-on-desktop">
                This sentence should only show on smaller devices.
            </div>
        </div>
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <form class="form1">
                <input type="text" name="search" placeholder="Search Text Here...">
                <button><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>

        </ul>
    </div>
</div>

CSS：

header .fa {
  color: grey;
}

header {
    background-color: #000;
}

@media (min-width: 200px) {
    .cls1 {
        float: left;
    }
    .cls2 {
        float: right;
    }
}

@media (min-width: 1200px) {
    .hide-on-desktop {
        visibility: hidden;
    }
}

Answer 1

Bootstrap已经内置了类来执行此操作，它们遵循其他引导类的相同屏幕大小，并将隐藏这些屏幕大小的元素。

Classes       |  Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)|
______________|______________________________________|________________________________|__________________________________|_________________________________|
.visible-xs-* |  Visible                             |    Hidden                      |   Hidden                         |  Hidden                         |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.visible-sm-* |  Hidden                              |    Visible                     |   Hidden                         |  Hidden                         |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.visible-md-* |  Hidden                              |    Hidden                      |   Visible                        |  Hidden                         |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.visible-lg-* |  Hidden                              |    Hidden                      |   Hidden                         |  Visible                        |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.hidden-xs    |  Hidden                              |    Visible                     |   Visible                        |  Visible                        |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.hidden-sm    |  Visible                             |    Hidden                      |   Visible                        |  Visible                        |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.hidden-md    |  Visible                             |    Visible                     |   Hidden                         |  Visible                        |
______________|______________________________________|________________________________|__________________________________|_________________________________|
.hidden-lg    |  Visible                             |    Visible                     |   Visible                        |  Hidden                         |
______________|______________________________________|________________________________|__________________________________|_________________________________|

也许它会帮助您了解引导程序库如何定义其中一个类：

.hidden-xs {
  display: block !important;
}


@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

他们将属性设置为重要属性，并使用最大宽度而不是最小宽度。这意味着“此css将被应用，直到最大屏幕宽度为767px”。

Answer 2

使用以下方式更改媒体查询：

@media (min-width: @screen-lg-min) {
    visibility: hidden;
}

Answer 3

请查看Bootstrap官方文档，他们会解释您需要的一切。

https://getbootstrap.com/docs/3.3/css/#responsive-utilities

示例：

.visible-xs 
.visible-sm 
.visible-md 
.visible-lg 
.hidden-xs  
.hidden-sm  
.hidden-md
.hidden-lg

使用这些类的另一个示例示例..

<div>Using hidden</div>
<div class="hidden-sm hidden-md">hidden-sm hidden-md</div>
<div class="hidden-sm hidden-lg">hidden-sm hidden-lg</div>
<div class="hidden-md hidden-lg">hidden-md hidden-lg</div>
<div>Theoretical equivalent using visible</div>
<div class="visible-lg">hidden-sm hidden-md</div>
<div class="visible-md">hidden-sm hidden-lg</div>
<div class="visible-sm">hidden-md hidden-lg</div>

Answer 4

仅更改此内容！

@media (min-width: 768px) {
.hide-on-desktop {
    display:none;
}    }

Working fiddle

根据您的意愿改变隐藏的像素。

CSS Media Query无法使用Bootstrap？

4 个答案: