Bootstrap Responsive Navbar无法正常工作

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

我查看了您的代码并将其与引导文档进行了比较，您可以看到差异：http://getbootstrap.com/docs/3.3/components/#navbar-default

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

＆＃13;

＆＃13;

    .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;
  }

＆＃13;

＆＃13;

＆＃13;