Bootstrap NavBar未对齐，特别是在移动视图中 [英] Bootstrap NavBar not aligned, especially in mobile view
问题描述
以下是我的网站以及代码的链接。我很喜欢我的名字，以适应我左侧的项目和右侧的电子邮件和推特图标。感谢您的帮助和时间。
< a href =https://jsbin.com/qufelu/1/edit?html,css,output =nofollow> https://jsbin.com/qufelu/1/edit?html,css,output 您正在使用一些不正确的类，缺少标记（在右对齐的东西上），未封闭的标记（折叠）以及正在使用过时古代历史中的属性（
$ b align =center）另外，您不需要将名称包装在div中。
CSS
.custom-navbar {
background：transparent;
border：0px;
}
@media（max-width：767px）{
.custom-navbar .name {
font-size：20px;
float：left;
保证金：0;
padding：15px 0 15px 15px;
}
.custom-navbar .navbar-toggle {
margin：10px 15px 0 0;
float：right;
}
}
@media（min-width：768px）{
.custom-navbar .navbar-header {
width：100％;
保证金：0;
}
.custom-navbar .name {
text-align：center;
float：none;
HTML： p>
< div class =navbar navbar-default custom-navbar>
< div class =container-fluid>
< div class =navbar-header>
< h2 class =name> Jovan S Hernandez< / h2>
< button type =buttonclass =navbar-toggledata-toggle =collapse
data-target =＃navbar-collapse>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< / div>
< div class =collapse navbar-collapseid =navbar-collapse>
< ul class =navbar-right nav navbar-nav>
< li>< a href =mailto：jovanshernandez@gmail.com>< i class =fa fa-envelope-o>< / i>给我发电子邮件< / a>< / li>
< li>< a href =http://www.twitter.com/jovansn0w>< i class =fa fa-twitter>< / i> Twitter并LT; / A>< /锂>
< / ul>
< ul class =nav navbar-nav navbar-left>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>
项目< b class =caret>< / b>
< / a>
< ul class =dropdown-menu>
< li>< a href =＃> JoCat Creative Media< / a>< / li>
< li>< a href =＃> Gesaffelstein Landing< / a>< / li>
< li>< a href =＃>每月分辨率< / a>< / li>
< li class =divider>< / li>
< li>< a href =＃>主页< / a>< / li>
< li class =divider>< / li>
< / ul>
< / li>
< / ul>
< / div>
<！ - .navbar-collapse - >
< / div>
<！ - .container - >
< / div>
<！ - .navbar - >
My navbar seems to go out of whack. It's especially evident when I view the site on my mobile device, or just shrink my desktop window.
Below is a link to my site along with the code. I would love for my name to fit between my projects tap on the left and my e-mail and twitter icons on the right. Thank you for your help and time.
(trying to get past stack socials 2 link limit...
imugr dot com/0s4iJyr
imgur dot com/vqjiyEd)
(Edited to include screenshots)
<div class="navbar navbar-default">
<div class="container">
<div class="Heading Tag" align="center"><h2>Jovan S Hernandez</h2></div>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Projects <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">JoCat Creative Media</a></li>
<li><a href="#">Gesaffelstein Landing</a></li>
<li><a href="#">Monthly Resolutions</a></li>
<li class="divider"></li>
<li><a href="#">Home</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
<ul class="pull-right">
<a href="mailto:jovanshernandez@gmail.com"><i class="fa fa-envelope-o"></i> Email Me</a>
<a href="http://www.twitter.com/jovansn0w"><i class="fa fa-twitter"></i> Twitter</a>
</ul>
</div><!-- .container -->
</div><!-- .navbar -->
DEMO: https://jsbin.com/qufelu/1/
https://jsbin.com/qufelu/1/edit?html,css,output
You were using some incorrect classes, missing tags (on the right aligned stuff), unclosed tag (collapse), and were using an outdated attribute from ancient history ( align="center") Also, you don't need to wrap the name inside a div.
CSS
.custom-navbar {
background: transparent;
border: 0px;
}
@media (max-width:767px) {
.custom-navbar .name {
font-size: 20px;
float: left;
margin: 0;
padding: 15px 0 15px 15px;
}
.custom-navbar .navbar-toggle {
margin: 10px 15px 0 0;
float: right;
}
}
@media (min-width:768px) {
.custom-navbar .navbar-header {
width: 100%;
margin: 0;
}
.custom-navbar .name {
text-align: center;
float: none;
}
}
HTML:
<div class="navbar navbar-default custom-navbar">
<div class="container-fluid">
<div class="navbar-header">
<h2 class="name">Jovan S Hernandez</h2>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbar-collapse">
<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" id="navbar-collapse">
<ul class="navbar-right nav navbar-nav">
<li><a href="mailto:jovanshernandez@gmail.com"><i class="fa fa-envelope-o"></i> Email Me</a></li>
<li><a href="http://www.twitter.com/jovansn0w"><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Projects <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">JoCat Creative Media</a></li>
<li><a href="#">Gesaffelstein Landing</a></li>
<li><a href="#">Monthly Resolutions</a></li>
<li class="divider"></li>
<li><a href="#">Home</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
<!-- .container -->
</div>
<!-- .navbar -->
这篇关于Bootstrap NavBar未对齐，特别是在移动视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
