带动态搜索框

Question

我试图找出如何使上述代码在显示器上表现良好＆gt; 768px和＆lt; 768px。现在对于低于768px的分辨率工作正常，但我无法使其适用于高于此值的分辨率。

这就是我想要做的事情：

768px以上的分辨率 - 整页（剩余宽度为100％的搜索框）：

低于768px的分辨率（仅搜索框可见）：

代码：

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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-right删除navbar-form。

Here is a JSFiddle - 还包含一个嵌入式代码段。

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;