带有动态搜索框的引导导航栏

Question

我试图弄清楚如何使上述代码在 > 768px 和

这就是我想要做的：

分辨率高于 768 像素 - 整页（搜索框剩余 100% 宽度）：

分辨率低于 768 像素（仅搜索框可见）：

代码：

.navbar .navbar-form {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.clear {
  width: 1%;
  display: table-column;
}

@media(max-width:767px) {

  .navbar .navbar-form {
    padding-left: 15px;
    padding-right: 0;
  }

  .navbar .navbar-form .input-group {
    padding-right: 15px;
  }

  .navbar .navbar-form .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-xs" href="/">Title</a>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for..."/>
                        <span class="clear hidden-sm hidden-md hidden-lg"></span>
                        <span class="input-group-btn hidden-xs">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/webpage1">Webpage 1</a></li>
                <li><a href="/webpage2">Webpage 2</a></li>
            </ul>

        </div>
    </div>
</nav>

Answer 1

哇，你自己有一个讨厌的小问题。我花了一段时间，但我想我已经为您找到了解决方案。

首先，您需要执行以下操作：

• 将display: inline 添加到您的form-group
• 将display: table 添加到您的input-group
• 将width: 1% 添加到您的input-group-btn

这些更改来自此问题（您想要的，但将搜索栏保留在折叠菜单中）-Bootstrap 3 - How to maximize input width inside navbar

您需要进行的下一个更改是当您高于 768px 断点时，否则它会弄乱您的折叠菜单。

@media(min-width:768px) {
    .container-fluid {
        display: flex;
    }
    .navbar-header {
        flex: 1;
    }
}

最后，您需要从您的navbar-form 中删除navbar-right。

Here is a JSFiddle - 还包括嵌入式 sn-p。

.navbar .navbar-form {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.clear {
  width: 1%;
  display: table-column;
}

@media(max-width:767px) {

  .navbar .navbar-form {
    padding-left: 15px;
    padding-right: 0;
  }

  .navbar .navbar-form .input-group {
    padding-right: 15px;
  }

  .navbar .navbar-form .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@media(min-width:768px) {
    .container-fluid {
        display: flex;
    }
    .navbar-header {
        flex: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-xs" href="/">Title</a>
            <form class="navbar-form" role="search">
                <div class="form-group" style="display: inline">
                    <div class="input-group" style="display: table">
                        <input type="text" class="form-control" placeholder="Search for..."/>
                        <span class="clear hidden-sm hidden-md hidden-lg"></span>
                        <span class="input-group-btn hidden-xs" style="width: 1%">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/webpage1">Webpage 1</a></li>
                <li><a href="/webpage2">Webpage 2</a></li>
            </ul>

        </div>
    </div>
</nav>