如何獲得位於一條線引導HTML元素

我使用的引導，但似乎無法得到頭元素出現在一條線上。

任何人有任何想法，我可以實現這一目標？

這裏是jsfiddle - https://jsfiddle.net/31wxk9ak/2/。取決於屏幕的大小，您可能需要調整此頁面上的分頁，以防止瀏覽器堆疊元素。

下面是代碼：

<html><head></head><body> 
<div id="root"> 
    <div data-reactroot="" class="container fill"> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
          aria-expanded="false" aria-controls="navbar"><span 
          class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span 
          class="icon-bar"></span><span class="icon-bar"></span></button> 
        <a class="navbar-brand" href="/">Home</a></div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a title="About" href="/about">About</a></li> 
         <li><a title="Contact" href="/contact">Contact</a></li> 
         <li> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6"> 
            <div class="input-group"><input type="text" class="form-control" 
                    placeholder="Search..." 
                    value=""><span class="input-group-btn"><input 
              type="button" class="btn btn-default" value="Go!"></span></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li> 
         <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</div> 
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">

https://oss.maxcdn.com/respond/1.4.2/respond.min.js' >

來源

2017-09-26 user1285855

我建議考慮看看引導導航條[**範例**]（https://v4-alpha.getbootstrap.com/examples/#navbars）。他們應該能夠幫助你。 –

您沒有正確實施導航欄，請在搜索框中使用表單。

  <ul class="nav navbar-nav navbar-right"> 
       <li> 
       <form class="navbar-form navbar-left"> 
        <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
       </li> 
       <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li> 
       <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li> 
      </ul>

JSFiddle Demo

參考：

Bootstrap Navbar

來源

2017-09-26 19:43:06

有明顯很多方法可以做到這一點，但我只展示一對夫婦。第一個使用浮動，只需將其應用於所有導航欄標題。

.navBarHeader { 
    float: left; 
}

或者，您可以使用內聯塊。

.navBarHeader { 
    display: inline-block; 
}

來源

2017-09-26 19:45:13

如何獲得位於一條線引導HTML元素

回答

相關問題