0
所以我做了一个简单的响应式导航。问题在于，对于手机来说，汉堡菜单列表项不会垂直堆叠。另外，对于普通桌面，单击注册下拉菜单会出现一些奇怪的原因。我几个小时后就陷入了困境。真的很感谢所有帮助..bootstrap - 汉堡导航不是垂直堆叠
input::-webkit-input-placeholder {
color: #2B74A8;
}
input::-moz-placeholder {
color: #2B74A8;
}
input:-ms-input-placeholder {
color: #2B74A8;
}
* {
max-width: 1280px;
}
.navbar {
overflow: visible;
margin-bottom: 20px;
background-color: transparent;
border: none;
}
ul.nav.navbar-nav {
background-color: #3FAFFF;
word-spacing: 40px;
margin-top: 170px;
height: 70px;
box-shadow: 0 4px #2B74A8;
width: 100%;
margin-right: 0;
color: #FFFFFF;
}
ul.nav.navbar-right {
margin: 0;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #FDFDFD;
text-decoration: none;
}
.navbar .nav > li > a {
float: none;
text-decoration: none;
text-shadow: none;
color: #FDFDFD;
font-size: 20px;
font-family: "SourceSansPro-Light";
top: 12.5px;
word-spacing: 40px;
text-transform: none;
}
li {
list-style: none;
}
.required {
font-size: 16px;
font-family: "SourceSansPro-Light";
color: #3FAFFF;
word-spacing: 10px;
}
body .inputArea {
width: 267px;
height: 44px;
word-spacing: 10px;
background-color: #2B74A8;
font-size: 16px;
font-family: "SourceSansPro-Light";
}
.submit {
width: 130px;
height: 44px;
font-size: 16px;
font-family: "SourceSansPro-Light";
color: #FFFFFF;
background-color: #3FAFFF;
background-image: none;
border: none;
text-shadow: none;
}
/*Media Queries*/
select.nav-select.form-control {
display: none;
}
nav.navbar.navbar-default {
border: none;
box-shadow: none;
background-color: transparent;
}
.registerForm {
cursor: pointer;
word-spacing: 0;
}
.navbar {
background-color: #3FAFFF;
border-color: #FFFFFF;
box-shadow: none;
}
.navbar a {
font-size: 1.3em;
transition: all 0.5s ease;
background: transparent;
}
.navbar-default .navbar-nav > li > a {
text-shadow: none;
}
.nav > li {
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
@media only screen and (max-width: 767px) {
#bs-example-navbar-collapse-1 {
position: absolute;
width: 100%;
height: auto;
background: #5E6E8F;
text-align: center;
}
ul.nav.navbar-nav {
display: block;
width: 100%;
float: none;
margin: 0;
text-align: center;
}
.navbar-toggle {
display: block;
margin-top: 2em;
}
.center {
text-align: center;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:visited {
border: none;
background-color: transparent;
}
}
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
.inputForm {
word-spacing: 10px;
height: 65px;
vertical-align: middle;
text-align: center;
position: relative;
top: 1em;
}
.form-control::-webkit-input-placeholder {
color: #3FAFFF;
}
.form-control:-moz-placeholder {
color: #3FAFFF;
}
.form-control::-moz-placeholder {
color: #3FAFFF;
}
.form-control:-ms-input-placeholder {
color: #3FAFFF;
}
body input {
border-color: transparent !important;
border: none;
}
.glyphicon {
top: 1.25em;
right: 4.5em;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<select class="nav-select form-control">
<option class="" value="/fundamentals">- Fundamentals</option>
<option class="" value="/html">- HTML</option>
<option class="" value="/stylesheets">- Stylesheets</option>
<option class="" value="/javascript">- JavaScript</option>
<option class="" value="/php">- PHP</option>
<option class="" value="/tutorials">- Tutorials</option>
<option class="" value="/register">- Register</option>
</select>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 1px;">
<ul class="nav navbar-nav">
<li><a href="/fundamentals/" target="_self">Fundamentals</a></li>
<li><a href="/html/" target="_self">HTML</a></li>
<li><a href="/stylesheets/" target="_self">Stylesheets</a></li>
<li><a href="/javaScript/" target="_self">JavaScript</a></li>
<li><a href="/php/" target="_self">PHP</a></li>
<li><a href="/tutorials/" target="_self">Tutorials</a></li>
<ul class="nav navbar-right">
<li class="dropdown">
<a href="#demo" data-toggle="collapse" class="registerForm">Register
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<div class="collapse" id="demo" style="background-color: #2B74A8;">
<div class="form-group inputForm">
<div class="col-xs-12">
<form class="form-inline">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="email" class="form-control inputArea" id="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
</div>
</div>
</div>
</li>
</ul>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>这里是link
你试图修改呢？或者改变你自己的CSS？ – Obink
是的，我尝试过。没有运气 – ross