我有这个问题在 Bootstrap .我做了一个导航栏,这是固定在顶部,并在计算机上的插件工作.但当我使用移动的视图的插件不显示.我已经搜索这个和其他网站的解决方案,但他们都没有为我工作.这个问题似乎是overflow:auto;
在移动的视图.
代码:http://www.bootply.com/tMdIqM9xSL
超文本标记语言:
<div class="row mynav">
<div class="col-md-12 nopadding">
<span class="logo glyphicon glyphicon-home" aria-hidden="true"><label>Hjem</label></span>
<div class="btn-group"><span class="logo glyphicon glyphicon-user" data-toggle="dropdown" aria-hidden="true"><label>Din profil</label><span class="caret"></span></span>
<ul class="dropdown-menu " role="menu">
<li><a href="#" data-toggle="modal" data-target="#myModal">Login</a>
</li>
<li><a href="#">My profile</a>
</li>
<li><a href="#">Add</a>
</li>
<li><a href="#">Favorites</a>
</li>
<li><a href="action.php?q=loggut">Logout</a>
</li>
</ul>
</div>
<span class="logo glyphicon glyphicon-stats align-bottom" aria-hidden="true"><label>Stats</label></span>
<span class="logo glyphicon glyphicon-envelope" aria-hidden="true"><label>Contact us</label></span>
<span class="logo glyphicon glyphicon-search pull-right" data-toggle="collapse" href="#m_showsearch" aria-hidden="true"><label>Search</label></span>
</div>
<div id="m_showsearch" class="panel-collapse collapse container-fluid">
<div class="col-md-4 floatnone">
<div class="panel panel-default search-panel">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapseFag">Subject</a></h4>
</div>
<div id="collapseFag" class="panel-collapse collapse in">
<div class="panel-body">
<p> </p><p> </p><p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 text-center floatnone">
<button type="button" class="searchbutton btn btn-primary btn-lg pull-center" onclick="findhelp();"><span class="glyphicon glyphicon-search" data-toggle="dropdown" aria-hidden="true"></span>
</button>
<br>
</div>
字符串
CSS:
.maincontainer {
padding: 0px;
}
.mynav {
border-bottom: 1px solid rgb(38, 70, 83);
background-color: #FFF;
text-align: left;
box-shadow: 0px 2px 2px #AAAAAA;
z-index: 10;
position: fixed;
width: 100%;
}
#spaceontop {
margin-bottom: 60px;
}
#m_showsearch {} a[title2]:hover:after {
font-size: 10px;
font-weight: thin;
border: 1px solid #000;
background-color: rgb(38, 70, 83);
content: attr(title2);
padding: 10px;
size: 5px;
color: #FFF;
position: absolute;
left: 50%;
top: 50px;
}
.dropdown-menu {
border-radius: 0px;
border: 1px solid rgb(38, 70, 83);
}
.dropdown-menu li a:hover {
background-color: #51b098;
color: #fff;
}
.panel {
box-shadow: 3px 3px 3px 0px;
border: 1px solid #51b098;
border-radius: 0px;
}
.search-panel {
border-radius: 3px;
box-shadow: 0px 0px 0px 0px;
}
.search-panel.panel-heading {
box-shadow: 0px 0px 0px 0px;
}
.panel>.panel-heading {
background-color: #FFF;
/*#51b098;*/
//box-shadow: 0px 2px 2px 0px;
border-radius: 0px;
font-size: 100%;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.panel>.panel-headinga a {
font-size: 20px;
font-weight: bold;
color: #51b098;
}
.panel-body {
// border:1px solid #51b098;
}
.btn-group {
vertical-align: initial;
}
.logo {
font-size: 20px;
height: 60px;
padding: 18px;
padding-left: 20px;
padding-right: 20px;
vertical-align: middle;
border-top: 3px solid transparent;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
-ms-transition: background 0.2s, color 0.2s;
-o-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
text-align: center;
}
.logo:hover {
//background-color:rgb(38, 70, 83);
color: orange;
//text-shadow:-1px -1px #000;
border-top: 3px solid rgb(38, 70, 83);
-webkit-transition: background 0.5s, color 0.2s;
-moz-transition: background 0.5s, color 0.2s;
-ms-transition: background 0.5s, color 0.2s;
-o-transition: background 0.5s, color 0.2s;
transition: background 0.5s, color 0.2s;
}
.logo label {
font-size: 12px;
padding: 14px 0px 14px 0px;
margin: 5px;
font-family: Lato;
text-transform: uppercase;
padding: 0px;
}
.btn,
.btn:hover,
.btn:focus {
//background-color:rgb(38, 70, 83);
padding: 20px;
//color:#FFF;
padding: 10px;
border-radius: 0px;
border: 0px;
}
.panel-default>.panel-heading {
background: transparent;
}
@media(max-width:1000px) {
.logo label:last-child {
display: none;
//visibility:hidden;
}
.logo {
height: 100%;
}
}
@media(max-width:768px) {
.logo label {
display: none;
padding: 20px 15px 15px 0px;
}
.logo {
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
padding: 10px;
}
.div_headline {
padding: 5px;
text-align: center;
width: 100%;
}
.div_headline:after {
display: none;
}
.floatnone {
padding: 0px;
}
#m_showsearch {
padding: 1px;
}
.mynav {
width: 100%;
margin-bottom: 0px;
max-height: 100%;
overflow: auto;
}
.dropdown-menu {
}
}
型
正如我所说,我已经尝试了我找到的每一种解决方案,但没有一个我找到的工作。
编辑:我需要溢出,使搜索按钮的工作。当我按下searchbutton一个div出现。和搜索div可能会很大,所以我需要能够滚动它。
1条答案
按热度按时间5lwkijsr1#
只要删除
overflow: auto
就行了。字符串