我有一个看起来像这样的导航栏:
当我尝试缩小页面以模拟移动设备时,它并没有完全崩溃:
它应该崩溃,以便隐藏在"注册"后面的按钮。文本成为菜单的切换。这是我的代码:
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"><a href="index.html">Home</a></span>
<span class="icon-bar"><a href="#" data-toggle="modal" data-target="#about-modal">About</a></span>
<span class="icon-bar"><a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a></span>
<span class="icon-bar"><a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a></span>
<span class="icon-bar"><a href="#" data-toggle="modal" data-target="#login-modal">Login</a></span>
<span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
</button>
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#about-modal">About</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>
</li>
<li>
<a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register <a href="https://github.com/join">Click Here!</a></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
如果那是所有相关代码,那么你不需要任何超出默认类的东西。
请参阅Default Navbar文档。
你不应该在标题中需要这些模态链接,然后再在导航栏链接中,这些是覆盖移动切换按钮的内容。
您的HTML结构已关闭和/或缺少某些部分。再次,如果您引用文档,则会看到不一致,您需要将切换按钮放在navbar-header
类中,navbar-form
不属于li
项目等。< / p>
请参阅工作示例摘录。
*请注意,因为您使用大约875px的大量空间链接,您会看到导航栏溢出到新行(当我的示例中发生这种情况时,CSS媒体查询会将背景变为红色)。一种解决方案是减少链接标题的长度以防止这种情况:
即想注册?点击这里!只需注册!。
@media (max-width: 875px) {
html,
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <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="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li> <a href="index.html">Home</a>
</li>
<li> <a href="#" data-toggle="modal" data-target="#about-modal">About</a>
</li>
<li> <a href="#" data-toggle="modal" data-target="#contact-modal">Contact</a>
</li>
<li> <a href="playground.html" class="tooltip-bottom" data-tooltip="Only here while under development.">Playground</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
</li>
<li> <a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal" data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>
</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">Remember Me</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register <a href="https://github.com/join">Click Here!</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>