当页面加载而不是隐藏时，如何使该div可见？
[英]How can I keep this div visible when page load instead of hidden?
问题描述
Sorry for the bad question title but I could'nt find a better one that suite my need.. 
对不起，这个问题的标题很抱歉，但是我找不到适合我需要的更好的标题。
So far I have a situation like this where a specific div is hidden when the page is on a small device and so far the behaviour is correct, when I click on the hamburger button the div it shows correctly, but the problem is: when the page is loaded on a larger screen that div is hidden, I can't find a way to make it show on a larger screen. 到目前为止，我有这样的情况这在当页面是一个小的设备上，到目前为止的行为是正确的，当我点击汉堡包按钮，它正确地显示在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>
EDIT: It is alright also if I can have the button always shown on any device size. 编辑：也可以，如果我可以使该按钮始终显示在任何设备尺寸上。
3 个解决方案
解决方案1
0 2016-12-02 10:07:54
This is something you can solve by CSS media queries which you can control on and assign different styles based on the screen size. 您可以通过CSS媒体查询来解决此问题 ，您可以控制CSS媒体查询并根据屏幕大小分配不同的样式。 You can read also about responsive web desgin 您还可以阅读有关响应式Web设计的信息
So yours will be something like this: 所以您的将是这样的：
@media (max-width: 600px) {
#myDiv {
display: none;
}
}
解决方案2
0 2016-12-02 10:09:08
That's because Bootstrap hides the hamburger button by default on screens with width greater than 768px . 这是因为默认情况下，Bootstrap在width大于768px屏幕上会隐藏汉堡包按钮。 If you don't want such a behavior you can disable it with a media query like this : 如果你不希望这样的行为，你可以像一个媒体查询禁用此 ：
@media(min-width: 768px){
.navbar-toggle{
display: inline-block !important;
position: absolute;
right: 0;
}
}
解决方案3
0 已采纳 2016-12-02 10:17:12
i think I found a better solution in the meantime.. By simply overriding the css: 我想我在此期间找到了一个更好的解决方案。通过简单地覆盖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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.