html - 在折叠的导航栏之后的一行上显示一个表单

Question

这是我当前的代码:https://www.bootply.com/EJSJ6aQh6Q

<div class="row">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span>...</span>
        </button>
    <a class="navbar-brand">Brand</a>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a>A</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a>A</a></li>
        </ul>
      </li>
      <li>
        <a>Subscribe</a> </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a id="registerLink">Register</a></li>
      <li><a id="loginLink">Sign In</a></li>
    </ul>

    <form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search">
      <div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup">
        <span><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span>
        <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button>
                                    </span>
      </div>
    </form>
  </div>
</div>

目前，当折叠时，搜索栏位于折叠部分下方。我希望搜索栏位于折叠部分之外，但与 navbar-brand 和折叠按钮不在同一行。如果我将 form 移动到 navbar-header div 中，它会完成我想要的，但是边距都乱七八糟，因为 bootstrap 仍然认为搜索栏在同一个与其他元素一样。

有没有更好的办法，或者我只需要将它移到 navbar-header 并修复弹出的格式问题？

Answer 1

这是您要找的吗？它仍然是使用 css 的粗略修复。我已经交换了表单 block 的位置以及 css 修复。可以为其他屏幕设备制作其他响应式 tweek。

https://www.bootply.com/pGDMXu2Q2R#

HTML:

<div class="row">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span>...</span>
        </button>
        <a class="navbar-brand">Brand</a>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a>A</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a>A</a></li>
                </ul>
            </li>
            <li>
                <a>Subscribe</a> </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li><a id="registerLink">Register</a></li>
            <li><a id="loginLink">Sign In</a></li>
        </ul>


    </div>
  <form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search">
<div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup">
                                    <span class="twitter-typeahead" style="position: relative; display: inline-block;"><input autocomplete="off" class="form-control typeahead-search tt-hint" type="text" value="" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input autocomplete="off" class="form-control typeahead-search tt-input" id="home-search" name="searchString" placeholder="Search..." type="text" value="" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Open Sans&quot;, Optima, Segoe, &quot;Segoe UI&quot;, Candara, Calibri, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span>
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button>
                                    </span>
                                </div>
        </form>
</div>

CSS:

/* 此处使用的 CSS 将在 bootstrap.css 之后应用 */

@media (min-width:768px) {
.navbar-form{
    position: absolute;
    right: 135px;
      top: 0;
}
}
@media (max-width:767px){
.twitter-typeahead{
  display:block !important;
}
}