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，当它调整大小以移动时，它会按“转到”按钮，并将搜索框插入到下面的行，而不是将其正确对齐并保持在同一行，我假设是导航栏右应该在做什么？

如何使它们保持一致？

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

编辑：

Fiddle link

Answer 1

设计在768px处中断-如果要防止这种情况发生，可以像在jsfiddle中一样重写使用@media（最小宽度：768px）的负责的引导导航栏CSS设置：https://jsfiddle.net/ua0xbg17/1/ < / p>

下面是您需要添加到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;
    } 
}

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

1 个答案: