How can I keep this div visible when page load instead of hidden?
Question
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.
<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 answers
solution1
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. You can read also about responsive web desgin
So yours will be something like this:
@media (max-width: 600px) {
#myDiv {
display: none;
}
}
solution2
0 2016-12-02 10:09:08
That's because Bootstrap hides the hamburger button by default on screens with width greater than 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;
}
}
solution3
0 ACCPTED 2016-12-02 10:17:12
i think I found a better solution in the meantime.. By simply overriding the 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.