html - Bootstrap 导航栏元素适合内容的宽度

Question

我正在升级到 bootstrap 4，但遇到了一些问题。

我有一个导航栏，看起来像这样:

如您所见，右边的 navbar-collapse 元素占用的空间比它需要的要多:

如何设置元素只使用它需要的宽度，而不进一步扩展？

这是 fiddle : https://jsfiddle.net/Zoker/ndv0ec54/

Answer 1

#user-menu {
  flex-grow: 0;
}

... 会做到的。您更新的代码段:

.row {
    background: #f8f9fa;
    margin-top: 20px;
}

.col {
    border: solid 1px #6c757d;
    padding: 10px;
}

#user-menu {
  flex-grow: 0;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg navbar-fix" id="header-nav">
    <!-- Mobile dropdown buttons -->
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggler float-left-mobile" id="main-menu-btn" data-toggle="collapse" data-target="#main-menu">
				<span class="navbar-toggler-icon"></span>
			</button>
            <a class="navbar-brand" href="./index.php">Demo</a>
            <button type="button" class="navbar-toggler ml-auto" id="user-menu-btn" data-toggle="collapse" data-target="#user-menu">
			<i class="fa fa-user fa-fw" aria-hidden="true"></i>
							</button>
            <button type="button" class="navbar-toggler" id="notification-menu-btn" data-toggle="collapse" data-target="#notification-menu">
					<i class="fa fa-bell fa-fw" aria-hidden="true"></i>
				</button>
            <button type="button" class="navbar-toggler float-right-mobile" id="search-menu-btn" data-toggle="collapse" data-target="#search-menu">
					<i class="fa fa-search fa-fw" aria-hidden="true"></i>
				</button>
        </div>
        <div class="collapse navbar-collapse" id="main-menu">
            <ul class="nav navbar-nav">
                <li id="quick-links" class="nav-item dropdown " data-skip-responsive="true">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bars fa-fw" aria-hidden="true"></i> Quick links</a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./search.php?search_id=egosearch" role="menuitem">Your posts</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/3.2/app.php/help/faq" title="Frequently Asked Questions"><i class="fa fa-question fa-fw" aria-hidden="true"></i> FAQ</a></li>
                <li class="nav-item"><a class="nav-link" href="./adm/index.php?sid=dd2782b45182896f68375850d9f61eee" title="Administration Control Panel"><i class="fa fa-cogs fa-fw" aria-hidden="true"></i> ACP</a></li>
                <li class="nav-item"><a class="nav-link" href="./mcp.php?i=main&amp;mode=front&amp;sid=dd2782b45182896f68375850d9f61eee" title="Moderator Control Panel"><i class="fa fa-gavel fa-fw" aria-hidden="true"></i> MCP</a></li>
            </ul>
        </div>
        <div class="collapse navbar-collapse" id="notification-menu">
            <ul class="nav navbar-nav navbar-right d-none d-md-block ml-auto">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle d-none d-md-block" id="notification-button" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> Notifications <span class="badge badge-danger">5</span></a>
                    <div class="dropdown-menu dropdown-menu-right notification-panel" id="notification-panel-desktop" role="menu">
                        <div id="notification_list">
                            <div class="card">
                                <div class="card-body">
                                    Test
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse" id="user-menu">
            <!-- Desktop user menu -->
            <ul class="nav navbar-nav ml-auto d-none d-md-flex">
                <li class="nav-item">
                    <a class="nav-link" href="./ucp.php?i=pm&amp;folder=inbox">
							<i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Private messages <span class="badge badge-secondary">0</span>
						</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
												admin 						<span class="caret"></span>
					</a>
                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                        <a class="dropdown-item" href="./ucp.php" title="User Control Panel" accesskey="e"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> User Control Panel</a>
                        <a class="dropdown-item" href="./memberlist.php?mode=viewprofile&amp;u=2" title="Profile"><i class="fa fa-sliders fa-fw" aria-hidden="true"></i> Profile</a>
                        <div class="dropdown-divider"></div>
                        <div class="p-2">
                            <button class="btn btn-danger btn-block" type="button" title="" accesskey="x" data-toggle="tooltip" data-container="body" data-original-title="Logout">
									<i class="fa fa-sign-out fa-fw" aria-hidden="true"></i> Logout
							</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

导航栏元素使用 flexbox 显示，默认情况下，它们的 flex-grow 值为 1。这意味着他们获得了额外空间的平等份额。通过将 flex-grow 设置为 0，他们只需要显示当前内容所需的最少内容。

将它们中的一个(或多个)设置为 flex-grow:0 会导致其余部分增长，因为它们正在获得元素的额外空间而没有获得任何元素。

注意:出于原则，因为上述规则只影响 lg 上的导航栏，所以我将其包装在 @media (min-width: 992px) { }，即使低于该宽度也没有不利影响。