Bootstrap：折叠时居中导航搜索栏答案

【问题标题】：Bootstrap: Center Navigation Searchbar when CollapsedBootstrap：折叠时居中导航搜索栏
【发布时间】：2014-01-26 11:57:34
【问题描述】：

我试图在折叠时使我的搜索栏居中。
目前看起来是这样的：

查看链接是否居中，而不是搜索栏。

这是 HTML：

<!-- Navigation Bar Start -->
    <div class = "navbar navbar-default navbar-static-top"> 

        <!-- Container -->
        <div class = "container">

            <div class=".navbar-header">

            <!-- Site Title -->
            <a href = "#" class = "navbar-brand">James Woods</a>

            </div> <!-- END Navbar Header -->

            <!-- Mobile Nav Button -->
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button> <!-- END Mobile Nav Button -->

            <!-- Navigation Links -->
            <div class = "collapse navbar-collapse navHeaderCollapse">

                <ul class = "nav navbar-nav navbar-right">

                    <li class="active"><a href = "">Home</a></li>
                    <li><a href = "">Creations</a></li>
                    <li><a href = "blog/index.html">Blog</a></li>

                    <li class = "dropdown"> 
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a>

                        <ul class = "dropdown-menu">
                            <li><a href = "#">Twitter</a></li>
                            <li><a href = "#">Deviant Art</a></li>
                            <li><a href = "#">Scratch</a></li>
                        </ul>
                    </li> <!-- END Links Nav -->

                    <li><a href = "contact.html">Contact Me</a></li>

                    <li>

                        <form class="navbar-form navbar-left form-inline" id="search" role="search">

                            <div class="form-group-group">
                                <div class="input-group" style="width: 220px;">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button>
                                    </span>
                                </div>
                            </div> <!-- END form group div -->

                        </form> <!-- END search bar form -->

                    </li>
                </ul> <!-- END navbar list -->

            </div> <!-- END navbar collapse div -->

            </div> <!-- END .navbar-header div -->

        </div> <!-- END container div -->

    </div> <!-- END navbar div -->

    <!-- END ALL NAVBAR CONTENT -->

现在是自定义 CSS：

@media (max-width: 768px){
.navbar-nav li{
text-align: center;
    }
}

【问题讨论】：

标签： html css twitter-bootstrap navigation

【解决方案1】：

将input-group 添加到您的CSS。使用margin: 0 auto;将其居中

@media (max-width: 768px){
.navbar-nav li {
    text-align: center;
    }
    .navbar-form .input-group {
    margin: 0 auto;
    }
}

http://bootply.com/108576

【讨论】：