Question

对不起的问题标题感到抱歉，但我找不到能满足我需求的更好的问题。

到目前为止，我遇到类似this的情况，当页面在一个小设备上时隐藏了一个特定的div，到目前为止行为是正确的，当我点击汉堡包按钮时它正确显示的div，但问题是：当页面被加载到更大的屏幕上时，div被隐藏了，我无法找到一种方法让它在更大的屏幕上显示。

<body style="padding-top: 70px;">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#formOra" aria-expanded="false" aria-controls="form">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Piant.ino</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

          <ul class="nav navbar-nav navbar-right">
<!--                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="plant.png">
                </a> -->

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
<div class="container-fluid">
            <form class="form collapse" id="formOra">
                <div class="form-group">
                    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-3">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <label class="checkbox-inline">
                                  <input type="checkbox" name="inlinecheckboxOptions" id="inlinecheckbox0" value="option1" onclick="salvaSettings();">00
                                </label>
                            </div>
                        </div>
                    </div>
.
.
.
.
.
    </div>

</form> 

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec efficitur tellus. Etiam nulla leo, hendrerit eget porta vitae, placerat sit amet neque. Mauris at efficitur quam. Aliquam ac ante vitae erat tincidunt lacinia eget quis 
</p>

</div>

</body>

修改如果我可以在任何设备尺寸上始终显示按钮，那也没关系。

Answer 1

这是您可以通过CSS media queries解决的问题，您可以根据屏幕尺寸控制并指定不同的样式。您还可以阅读responsive web desgin

所以你的会是这样的：

@media (max-width: 600px) {
  #myDiv {
    display: none;
  }
}

Answer 2

这是因为默认情况下，Bootstrap会在width大于768px的屏幕上隐藏汉堡包按钮。如果您不想要此类行为，可以使用this等媒体查询将其停用：

@media(min-width: 768px){
  .navbar-toggle{
    display: inline-block !important;
    position: absolute;
    right: 0;
  }
}

Answer 3

我认为我在此期间找到了更好的解决方案..通过简单地覆盖css：

   .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

JSFIDDLE

当页面加载而不是隐藏时，如何保持此div可见？

3 个答案: