如何在 Bootstrap 4 中定位导航栏内容答案

【问题标题】：How to center position navbar content in Bootstrap如何在 Bootstrap 4 中定位导航栏内容
【发布时间】：2017-08-27 07:01:00
【问题描述】：

我正在学习 bootstrap 4 导航栏，但我无法清楚地理解如何在导航栏中定位对象我希望将搜索框放置在导航栏的中心并在右侧放置一个按钮，但我只能做到导航栏没有在中心对齐。

        <div class="collapse navbar-collapse text-xs-center" id="mynavbar">

        <div class="col-lg-4 form-inline navbar-form">
            <div class="input-group">
                <form class="form-inline my-lg-0">
                    <input class="form-control " type="text" placeholder="Search">
                    <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
                </form>

            </div>
        </div>

        <ul class="navbar-nav w-100 justify-content-end">

            <li class="nav-item" style="margin-right: 15px;">
                <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
          </ul>
         </div>

【问题讨论】：

标签： css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

在 Bootstrap 4 中有不同的导航栏对齐方法。一种方法是在内容上使用mx-auto 来居中（表单）...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
    <div class="navbar-collapse collapse" id="mynavbar">
        <form class="form-inline mx-auto">
            <div class="input-group my-lg-0">
                <input class="form-control " type="text" placeholder="Search">
                <span class="input-group-btn">
                <button class="btn" type="submit">Search</button>
                </span>
            </div>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                 <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

但是搜索表单将完全居中，因为左侧没有内容，并且表单会被右侧的按钮稍微向左推。

所以在这种情况下，我建议使用 flexbox 实用程序 类..

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
    <div class="navbar-collapse collapse" id="mynavbar">
        <span class="navbar-text w-100"> </span>
        <form class="form-inline w-100 justify-content-center">
            <div class="input-group my-lg-0">
                <input class="form-control " type="text" placeholder="Search">
                <span class="input-group-btn">
                <button class="btn" type="submit">Search</button>
                </span>
            </div>
        </form>
        <ul class="navbar-nav w-100 justify-content-end">
            <li class="nav-item">
                 <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

Demo of both centering methods

【讨论】：