Bootstrap 3のnavbarの空き領域を埋めるために検索バーを拡張する方法

ブートストラップ3内のnavbarの検索バーを展開して、空き領域を埋めるようにしたい（つまり、検索バーを移動したいロゴから「ホーム」まで）。これどうやってするの？Bootstrap 3のnavbarの空き領域を埋めるために検索バーを拡張する方法

HTML：事前に

<!-- Navbar --> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <!-- Menu for mobile display --> 
     <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> 
     <!-- Website logo --> 
     <a class="navbar-brand" href="#"><img alt="Brand" src="res/common/img/logo.png"></a> 
    </div> 

    <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <label for="search-bar" class="sr-only">Search bar</label> 
     <div class="input-group"> 
      <input type="search" class="form-control" placeholder="Search..."> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
      </span> 
     </div> 
     </div> 
    </form> 

    <!-- Navbar content (collapsed in mobile view) --> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <!-- Float right --> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <!-- Dropdown under profile name --> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Settings</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Logout</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav>

ありがとう！^-^

出典

2017-03-09 Tirafesi

easyfixは.navbar-leftにwidth属性を使用し、.form-group, .input-group { width: 100%; }を追加します。

<html> 
 

 

 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
      
 
      </head> 
 
<body > 
 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <!-- Menu for mobile display --> 
 
     <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> 
 
     <!-- Website logo --> 
 
     <a class="navbar-brand" href="#"><img alt="Brand" src="res/common/img/logo.png"></a> 
 
    </div> 
 

 
    <form class="navbar-form navbar-left" style="width:80%;" role="search"> 
 
     <div class="form-group"style="width:100%;" > 
 
     <label for="search-bar" class="sr-only">Search bar</label> 
 
     <div class="input-group" style="width:100%;" > 
 
      <input type="search" style="width: 100%;" class="form-control" placeholder="Search..."> 
 
      <span class="input-group-btn" > 
 
      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </form> 
 

 
    <!-- Navbar content (collapsed in mobile view) --> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <!-- Float right --> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a></li> 
 
     <!-- Dropdown under profile name --> 
 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Profile</a></li> 
 
      <li><a href="#">Settings</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Logout</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
</body> 
 

 
</html>

この情報がお役に立てば幸い！

出典

2017-03-10 01:51:36 neophyte

Bootstrap 3のnavbarの空き領域を埋めるために検索バーを拡張する方法

答えて

関連する問題