目标

Question

目标

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

未收缩

折叠

我的解决方案

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

First Hack

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

第二次黑客

为了让选项显示在相对于搜索的正确位置（在未折叠时向右，在折叠时向下），我不得不重复（可怕的我知道）选项div 。我在搜索输入之前和之后定义了一个。然后我应用css hacks只显示两个选项中的一个，具体取决于导航栏是否已折叠。

问题

我创建了一个精简版bootply来展示我的工作黑客。我怎样才能以正确的方式实现这一目标？我很乐意完全放弃我的方法，转而采用更清洁的解决方案。

免责声明：我还不熟悉HTML / CSS和Bootstrap，所以我可能会以错误的方式做各种事情。

相关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>

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

目标

未收缩

折叠

我的解决方案

First Hack

第二次黑客

问题

相关HTML

相关CSS

1 个答案: