我有一个 bootstrap 导航栏，它不会与按钮和搜索框保持一致 - 如何使其保持一致？

Question

<nav id="NavbarMaster" class="navbar NavCompression">
  <!-- style="min-height:100px;" -->
  <div id="navToggler" class="container-fluid  TitleBG TitleHeight">
    <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0;right:20%;bottom: calc(100% - 50px);background-color:transparent;"></div>
    <div class="navbar-header">
      <p class="navbar-brand WhiteText standardBtn Pointer">My&nbsp;Area</p>
    </div>

    <div class="navbar-form navbar-right">
      <div class="form-group">
        <input id="txtQuickSearchV2" type="text" class="form-control" placeholder="Search" name="search" />
      </div>
      <button id="btnQuickFind" type="submit" class="btn btn-default">Go</button>
    </div>
  </div>
</nav>

我有上面的 navbar，当它调整到移动设备大小时，它会将 'Go' 按钮和搜索框踢到下面的行，而不是将其正确对齐并保持不变在线，我假设是 navbar-right 应该做什么？

如何让它们保持一致？

所有非bootstrap 类都是化妆品（颜色等）

编辑：

Fiddle link

Answer 1

设计在 768px 处中断 - 如果你想避免这种情况，你可以像我一样覆盖使用@media（最小宽度：768px）的负责任的 bootstrap 导航栏 CSS 设置在这个 jsfiddle 中：https://jsfiddle.net/ua0xbg17/1/

下面是您需要添加到 CSS 文件以覆盖 bootstrap 设置的 CSS。您必须在此 CSS 中更改容器和导航栏的最小宽度，以使其适应您的最终导航栏。

@media (max-width: 768px) {
    .navbar-header {
        float: left;
    }
    .container {
        min-width: 380px;
    }
    .navbar {
        border-radius: 4px;
        min-width: 380px;
    }
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-left {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    } 
}

我有一个 bootstrap 导航栏，它不会与按钮和搜索框保持一致 - 如何使其保持一致？

I have a bootstrap navbar that will not stay in-line with the button and search box - how do I make it in-line?

html

css

nav

responsive-design

twitter-bootstrap-3