Question

我正在学习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>

Answer 1

Bootstrap 4中有不同的Navbar对齐方法。一种方法是在内容上使用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

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

1 个答案: