Bootstrap 4导航栏,带有文本的居中blurb

问题描述 投票:1回答:1

我以为这很容易,但是7小时后,不。

我正在尝试将navbar-brand定位在左侧,文本的中部对齐(始终可见),而navbar-collapse定位在右侧。

问题是总是可见居中的文本-我尝试的所有操作都会将文本强制换行。

    <div class="navbar navbar-expand-lg justify-content-center">
        <div class="container">
            <a href="/" class="navbar-brand d-flex w-50 mr-auto">
                <h1>
                    <img src="/img/xxx.svg" width="36" height="36" alt="foobar">
                    Foobar
                </h1>
            </a>

            <need a container here to center this text>CENTERED BLURB OF TEXT</need>

            <button type="button" class="navbar-toggler bg-primary" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="valign-image-text">
                    MENU
                    <img src="/img/menu-light.svg" width="30" height="30" alt="" class="ml-2">
                </span>
            </button>

            <div class="navbar-collapse collapse w-100" id="navbar-collapse">
                <!-- <ul class="navbar-nav w-100 justify-content-center"> -->
                    <!-- <li>This centered blurb of text collapses, not what I want</li> -->
                <!-- </ul> -->

                <ul class="navbar-nav w-100 ml-auto justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    <li class="nav-item"><a class="btn btn-gray ml-0 ml-lg-4" href="#">Downloads</a></li>
                </ul>
            </div>
        </div>
    </div>

不要在SO上发布指向其他Bootstrap 4居中帮助程序的链接,因为它们涵盖了这一点。

bootstrap-4
1个回答
0
投票
.abs-center-x { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); }

https://codeply.com/p/28xqoMNWGY

注意,在“下载”的左边距处,居中文本

确实在断点之前重叠。

热门问题
推荐问题
最新问题