Question

我的导航栏似乎没有出现问题。当我在移动设备上查看网站时，或者只是收缩我的桌面窗口时，这一点尤其明显。

以下是我的网站链接以及代码。我希望我的名字能够适合我左边的项目和右边的电子邮件和推特图标。感谢您的帮助和时间。

（试图超越堆栈社交2链接限制...

imugr dot com / 0s4iJyr

imgur dot com / vqjiyEd）

（编辑包含截图）

<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 -->

Answer 1

DEMO：https://jsbin.com/qufelu/1/

https://jsbin.com/qufelu/1/edit?html,css,output

你使用了一些不正确的类，缺少标签（在右对齐的东西上），未封闭的标签（崩溃），并使用了古代历史中过时的属性（align="center"）另外，你不是需要将名称包含在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未对齐，尤其是在移动视图中

1 个答案:

DEMO：https://jsbin.com/qufelu/1/