折疊時在同一行上對齊引導導航元素

Question

這是我第一次嘗試創建引導菜單，而我在以下問題上陷入困境。 我嘗試過針對類似問題提出的不同解決方案，但沒有成功☹

1. 折疊后，我要輸入文字：這是“ button1”按鈕旁邊的一個Button。 我嘗試過使用內聯樣式，但是我無法讓2個元素保持同一行。

2. 如果我設法將它們顯示在同一行上，當折疊時，如何使文本元素與下面的下拉元素具有相同的左邊距？ 我不確定為什么text＆button元素的左邊距與其下方的下拉菜單沒有相同。

這是我的代碼的副本： https : //jsfiddle.net/b512zesq/

謝謝！

 .navbar { min-height: 80px; background: #ee4035; border-width: 0px; border-radius: 0px; color: blue; } .navbar a { color: white!important; } .navbar-brand { padding: 0 15px; height: 80px; line-height: 80px; color: white; } .navbar-toggle { /* (80px - button height 34px) / 2 = 23px */ margin-top: 23px; padding: 9px 10px !important; } .navbar-btn { /* (80px - button height 34px) / 2 = 23px */ margin-top: 18px; margin-right: 30px; padding: 9px 9; background: #f37736; border-width: 0px; height: 35px; width: 150px; } .navbar-text { margin-top: 28px; color: white; } .nav.navbar-nav.navbar-right li a { color: white; } .dropdown-menu { background: #ee4035; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #d6392f; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #ffffff; } .navbar-default .navbar-nav>li>.dropdown-menu { background-color: #ee4035; } .navbar-default .navbar-nav>li>.dropdown-menu>li>a { color: #ffffff; } .bar-nav>li>.dropdown-menu>li>a:hover, .navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus { color: #ffffff; background-color: #d6392f; } .navbar-default .navbar-nav>li>.dropdown-menu>li>.divider { background-color: blue; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #ffffff; background-color: #d6392f; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color: #ffffff; background-color: #d6392f; } .navbar-default .navbar-toggle { border-color: #d6392f; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #d6392f; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #ffffff; } /*RESPONSIVE*************************************************/ @media (min-width: 768px) { .navbar-nav>li>a { /* (80px - line-height of 27px) / 2 = 26.5px */ padding-top: 26.5px; padding-bottom: 26.5px; line-height: 27px; } } /**END OF RESPONSIVE********************************************/ 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <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> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="inline"><span class="navbar-text" style="color:white"><strong>this is a button</strong></span></li> <li><a class="btn btn-danger navbar-btn" href="{$rlBase}/add-listing.html" role="button">button 1</a></li> <form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form> <li class="dropdown"> <a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="{$rlBase}/login.html"><span class="glyphicon glyphicon-user"></span> USERNAME<span class="caret"></a> </div> </div> </nav> 

Answer 1

1. 您可以使用display: inline-flex為父級<ul>樣式，並將下拉列表放在列表項之外。 但是，這可能會導致兼容性問題。
2. 只需為您的列表項向左填充15px。 下拉鏈接的默認左填充為15px（您可以在第23行的navs.less文件中找到該填充）。