Bootstrap导航栏项目适合内容的宽度

时间：2018-06-24 22:07:15

标签： html css bootstrap-4

我正在升级到Bootstrap 4，并且遇到了一些问题。

我有一个导航栏，看起来像这样： enter image description here

如您所见，右边的navbar-collapse元素需要的空间比它需要的更多： enter image description here

如何设置元素以仅使用其所需的宽度，而无需进一步扩展？

这是小提琴： https://jsfiddle.net/Zoker/ndv0ec54/

2 个答案:

答案 0 :(得分：5)

#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) { }内，即使在该宽度以下没有不利影响。

答案 1 :(得分：1)

为flex-grow-0 navbar-collapse使用div 

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

如代码段所示， nav-bar-collapse 具有属性 flex-grow ，该属性设置为 1 。因此，它占用了所有可用空间。如果您希望它占用所需的空间，则需要将其 flex-grow 设置为 0 。您可以使用 flex-grow-0 类来实现。

https://jsfiddle.net/nm5cvqju/

由于flex-grow-0是通用类，因此您无需使用任何媒体查询。仅供参考，flex-*-grow-*也存在，例如flex-md-grow-0和flex-sm-grow-1。

您需要使用最新版本的引导程序bootstrap.4.1.1-因为旧版本中没有flex-*-grow-*类。

相关问题
最新问题