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

【问题标题】：I have a bootstrap navbar that will not stay in-line with the button and search box - how do I make it in-line?我有一个引导导航栏，它不会与按钮和搜索框保持一致 - 我如何使其保持一致？
【发布时间】：2019-09-21 03:40:59
【问题描述】：

<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，当它重新调整大小以适应移动设备时，它会将“开始”按钮和搜索框踢到下面的行，而不是正确对齐并保持内联，我我假设 navbar-right 应该做什么？

如何让它们保持一致？

所有非引导类都是装饰性的（颜色等）

编辑：

Fiddle link

【问题讨论】：

制作一个小提琴，这样人们至少可以看到问题所在。
@Strelok 加了一个

标签： html css twitter-bootstrap-3 responsive-design nav

【解决方案1】：

设计在 768px 处中断 - 如果您想防止这种情况发生，您可以覆盖使用 @media (min-width: 768px) 的负责任的引导导航栏 CSS 设置，就像我在这个 jsfiddle 中所做的那样：https://jsfiddle.net/ua0xbg17/1/

以下是您需要添加到 CSS 文件中以覆盖引导设置的 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;
    } 
}

【讨论】：

:o) 乐于助人！