在响应模式下将搜索框移动到中心

Question

我正在使用来自 this 参考的 bootstrap 导航栏，我正在尝试在移动设备上用户不需要点击菜单图标来搜索页面.因此，尝试在响应模式下仅在品牌之后显示 search-box 。

Bootstrap 在普通桌面浏览器中看起来像这样：

在响应模式下看起来像这样：

我必须将搜索框和登录选项移动到移动设备上品牌之后的中心位置。我尝试使用 css 将搜索框移出导航栏，但它搞砸了我的整个 HTML。

谁能指导我，怎么做？这是

[JSFiddle Link][4] - https://jsfiddle.net/mzy1sak3/1/

Answer 1

当我们在移动设备中单击导航栏切换按钮时，导航栏折叠菜单将显示，因为该导航菜单具有默认导航栏搜索option.It 无法更改而不更改bootstrap 默认行为，但有一个棘手的选项。您可以通过添加名为 "hidden-xs" 的额外 class 来隐藏它。然后您可以放置另一个 div，带有 "visible-xs" class，您可以在其中放置移动表格设备。

这是示例 html：

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">Title</a>

                <div class="visible-xs">
                    <form class="navbar-search-sm" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>

                    <ul class="list-inline navbar-links-sm">
                        <li><a href="#">Login</a></li>
                    </ul>

                </div>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                <form class="navbar-form navbar-left hidden-xs" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- End Navbar -->

您可以像这样自定义 css：

.navbar-search-sm{ display: inline-block; margin-top: 8px; }
.navbar-search-sm .form-group{ width: 300px; margin-bottom: 0; }
.navbar-links-sm{ display: inline-block; margin-left: 15px; }

Answer 2

这是一个方法使用 iPhone 5 和 5S 屏幕分辨率

将 ul 输入标签和登录 div 包装在另一个 div 中，id form_login 并低于上述样式

@media screen and (min-width: 320px) and (max-width: 568px) {
  #form_login {
    position: absolute;
    top: 0;
    transform: translate(0, 50%);
  }
  #navbarCollapse {
    padding-top: 120px;
  }
}

参见 fiddle here（调整 window 宽度）

您需要为其他设备应用其他媒体规则

在响应模式下将搜索框移动到中心

Move search box to the center in responsive mode

html

css

navbar

responsive-design