ブートストラップコードでナビバーをインライン化する方法

多くの人が同じ質問をしていますが、これを修正するための指示に従っていますが、わかりません。ブートストラップコードでナビバーをインライン化する方法

<body> 
    <div class="container-fluid"> 
     <nav class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <div class="navbar-main"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#"><span class="glyphicons glyphicons-home"></span>Home</a></li> 
      </ul> 
     <ul class="nav navbar-nav nav-center brand"> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <li><a href="#">Welcome</a></li> 
      </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</body>

任意の助けいただければ幸いです。..

出典

2017-10-07 Linnea Anderson

が要求されるように、このスニペットはそれが仕事である必要があります参照してください。

.navbar .container-fluid>.navbar-header { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.navbar .navbar-nav { 
 
    float: left; 
 
    margin: 5px; 
 
} 
 
.nav>li { 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand">Home</a> 
 
    </div> 
 

 
    <div style="display: inline-block;"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#"> 
 
        <form class="navbar-form navbar-right"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </form> 
 
     </a> 
 
     </li> 
 
     <li><a href="#">Welcome</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

はあなたのためにこの作品を願っています。

出典

2017-10-07 13:50:20

ブートストラップコードでナビバーをインライン化する方法

答えて

関連する問題