在 Bootstrap 导航栏中创建始终显示的全宽搜索输入

Question

目标

我正在尝试创建一个 Bootstrap 导航栏，其中包括始终显示的全宽搜索输入（当导航栏同时折叠和未折叠时）以及紧邻搜索右侧的下拉列表，该列表像往常一样切换.

未折叠

已折叠

我的解决方案

我能够通过在导航栏标题内定义搜索输入并应用一些 css 使其全宽来实现这一点。但是，为了使选项下拉列表正确显示并在折叠的和未折叠的视图中保持搜索输入的全宽，我应用了我只能描述为一系列黑客的东西。我希望帮助提出适当的解决方案。

第一次破解

我在标题中定义了选项。当我在标题之外定义选项时，我要么无法让搜索保持全宽，要么无法将搜索和选项保持在同一行，这取决于我尝试的不同解决方案。

第二次破解

为了使选项显示在相对于搜索的正确位置（未折叠时显示在右侧，折叠时显示在下方），我不得不复制（我知道很糟糕）选项 div .我在搜索输入之前和之后定义了一个。然后我应用 css hack 仅显示两个选项之一，具体取决于导航栏是否折叠。

问题

我创建了一个精简的bootply，展示了我的工作技巧。我怎样才能以正确的方式做到这一点？我很乐意完全放弃我的方法，转而采用更清洁的解决方案。

免责声明：我对 HTML/CSS 和 Bootstrap 还是很陌生，所以我可能以错误的方式做各种事情。

相关 HTML

    <nav class="navbar navbar-default navbar-fixed-top" ng-controller="SearchController">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navbar-right navbar-hack1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Some Options</li>
                            <li>
                              <select><option>Option 1</option><option>Option 2</option></select>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>            
            <div class="search form-inline">
                <input type="text" class="form-control input-lg" role="search" id="query" placeholder="Search">
            </div>
            <div class="collapse navbar-collapse navbar-right navbar-hack2" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Some Options</li>
                            <li>
                              <select><option>Option 1</option><option>Option 2</option></select>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>    
</nav>

相关的 CSS

.navbar-header {
    float: none !important;
}

@media (min-width: 768px) {
    .navbar-header {
        float: none !important;
    }

    .navbar-collapse {
        float: right !important;
    }

    .navbar-hack2.collapse {
        display: none !important;
    }

    .search {
        margin-right: 100px !important;
    }

    .search input {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .navbar-hack1 {
        display: none !important;
    }
}

Answer 1

这可能会对您有所帮助或提供一些想法。

/**Custom**/

body,
html {
  margin-top: 60px;
}
.navbar-default .formSearch {
  left: 0;
  position: absolute;
  width: 85%;
}
.navbar-default #search-input {
  height: 50px;
  background: #f5f5f5;
  color: #444;
  box-shadow: none;
  outline: none;
  font-size: 20px;
  border: none;
}
@media (max-width: 360px) {
  .navbar-default #search-input {
    width: 85%;
    font-size: 16px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <form class="formSearch" role="search">
        <input type="text" class="form-control" id="search-input" placeholder="Search for Something...">
      </form>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <div class="well well-lg">
    <h1>Boostrap Search Bar</h1>

  </div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.</p>
</div>