html - Bootstrap 响应式导航栏无法正常工作

Question

Here's a screenshot of the exact responsive navbar I'm trying to achieve A screenshot of the navbar on fullscreen A screenshot of the navbar on mobile size screen我一直试图让我的响应式导航栏/标题正常运行，但是当我在移动屏幕上单击图标以显示菜单时，标题上列出的元素似乎散落在页面周围。

为了更好地解释它，我想做一个像这样的导航栏: https://house.jumia.com.ng/ .任何帮助，将不胜感激。这是我的代码:

.navbar-custom {
		background-color:#36b;
		color:#ffffff;
		border-radius:0;
		height:68px;
		margin-bottom: 0;
	}
			
.navbar-custom .navbar-nav > li > a {
		color:#fff;
		text-align: center;
		padding-left: 0;
		padding: 25px 0 75px 0;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		font-size:13px;
	}
			
 .btn {
		box-sizing: border-box;
		appearance: none;
		background-color: transparent;
		border: 2px solid #e74c3c;
		border-radius: 0.6em;
		color: #e74c3c;
		cursor: pointer;
		align-self: center;
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		margin: 20px;
		padding: 1.2em 2.8em;
		text-align: center;
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
	}

.btn:hover, .btn:focus {
		color: #fff;
		outline: none !important;
	}

.first {
		border-color: #73ADFF;
		color: #fff;
		background-color:#73ADFF;
		vertical-align:middle,!important;
		padding: 10px 16px;
		line-height: 16px;
		display: inline-block;
		font-size:12px;
		font-weight:600;
		margin-top:14px;
		margin-right:150px;
	}

      
    
<nav class="navbar navbar-custom">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                     
      </button>
    </div>
                                    
    <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav navbar-right">  
          <a href="signup.php">
            <button class="btn first">
            <span class="glyphicon glyphicon-plus">
          </span>&nbsp;OFFER PROPERTY</button></a>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="signup.php">
            <span class="glyphicon glyphicon-user">
            </span>&nbsp;Login / Register</a>
          </li>
        </ul>
    </div>              
  </div>
</nav>
    

Answer 1

我查看了您的代码并将其与 bootstrap 文档进行了比较，您可以看到不同之处:http://getbootstrap.com/docs/3.3/components/#navbar-default

您所有的问题都与 CSS 相关。此外，您没有发布所有代码，您拍摄的屏幕截图与您在此处发布的代码不同。无论如何，我重新调整了您的 CSS 并让移动菜单在我的机器上正常运行。评论如下:

    .navbar-custom {
      background-color:#36b;
      color:#ffffff;
      border-radius:0;
      /*height:68px; Don't need to compensate for the large padding now*/
      height: auto;
      margin-bottom: 0;
    }

  .navbar-custom .navbar-nav > li > a {
    color:#fff;
    text-align: center;
    padding-left: 0;
    /* padding: 25px 0 75px 0; Not sure why so much padding */
    padding: 25px 0 5px 0;
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size:13px;
  }

   /*Make sure we can see our mobile menu on our blue background */
  .navbar-custom button.navbar-toggle {
    border: 1px solid #e0e0e0;
  }
  .navbar-custom span.icon-bar {
    background-color: #fff;
  }

  .btn {
    box-sizing: border-box;
    appearance: none;
    background-color: transparent;
    border: 2px solid #e74c3c;
    border-radius: 0.6em;
    color: #e74c3c;
    cursor: pointer;
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin: 20px;
    padding: 1.2em 2.8em;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }

  .btn:hover, .btn:focus {
    color: #fff;
    outline: none !important;
  }

  .first {
    border-color: #73ADFF;
    color: #fff;
    background-color:#73ADFF;
    vertical-align:middle,!important;
    padding: 10px 16px;
    line-height: 16px;
    display: inline-block;
    font-size:12px;
    font-weight:600;
    margin-top:14px;
    margin-right:150px;
  }