Question

我正在使用新的Bootstrap 4为一个网站工作，不幸的是这个网站名称很长，因此我在导航栏中显示此名称时遇到问题。如下图所示，长名称导致打开导航选项的汉堡按钮（3行物）已下降到第二行。由于与Scrollspy相关的复杂问题，我需要防止这种情况，以确保导航栏的高度与设备屏幕大小无关。有没有办法可以防止这种情况发生，或者设置手机有不同的短标题文本，例如“网页名称”，这将允许名称适合汉堡按钮旁边。我知道这在Bootstrap 3中是可能的，但是，我在Bootstrap 4中找不到可行的替代方案。

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar">
        <a class="navbar-brand" href="#home">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top">Annoying Long Webpage Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                <li class="nav-item"><a class="nav-link active" href="#about" id="aboutlink">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#whatwedo">What We Do</a></li>
                <li class="nav-item"><a class="nav-link" href="#join">Join</a></li>
            </ul>
        </div>
    </nav>

Answer 1

以下是我为Bootstrap v4-beta找到的解决方案：

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar">
    <a class="navbar-brand" href="#home">
        <img src="img/logo.png" class="navbar-sqnlogo d-inline-block align-top">
        Long <span class="d-none d-md-inline">Web Page </span>Name
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#home">Home</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#about" id="aboutlink">About</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#whatwedo">What We Do</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#join">Join</a></li>
        </ul>
    </div>
</nav

作为参考，班级d-*-*可以做到这一点。

Answer 2

您可以使用应用于img标记的hidden-sm-up和hidden-sm-down类，根据屏幕大小隐藏/显示更长和更短的名称。

我会通过创建两个不同的img标记来完成此操作：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top hidden-sm-down">Annoying Long Webpage Name</a>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top hidden-sm-up">Shorter Name</a>

这样，当页面处于移动状态时，长标题将隐藏，较短的标题将显示。

Bootstrap 4 - 手机上的Navbar标题

2 个答案: