如何在 Bootstrap 4 中定位导航栏内容 [英] How to position navbar contents in Bootstrap 4

查看：19
本文介绍了如何在 Bootstrap 4 中定位导航栏内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 
<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">搜索</button></表单>

<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>

解决方案

在 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">搜索</button></span>

</表单><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>

</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">搜索</button></span>
</表单><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>
</nav>

两种居中方法的演示

I am learning bootstrap 4 navbar but i was not able to understand clearly how to position objects in navbar i want a search box to be placed at the center of navbar and a button on right but i was only able to do it navbar is not getting aligned at center.

        <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>

解决方案

There are different methods for Navbar alignment in Bootstrap 4. One way is to use mx-auto on the content to center (the form)...

<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>

But the search form will not be perfectly centered because there is no content in the left, and the form will be pushed slight left by the button on the right.

So in this case, I'd recommend using the flexbox utility classes..

<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 中定位导航栏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆