Question

我想在bootstrap 3中展开导航栏的搜索栏，以便填充可用空间（即我希望搜索栏从Logo转到＆＃39; Home＆＃39;）。我怎么能这样做？

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>

提前致谢！ ^ - ^

Answer 1

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>

希望这有帮助！

如何在Bootstrap 3中扩展搜索栏以填充导航栏中的可用空间

1 个答案: