Bootstrap элементы панели навигации соответствуют ширине содержимого

Question

Я обновляюсь до начальной версии 4 и у меня есть некоторые проблемы.

У меня есть навигационная панель, которая выглядит так:

Как видите, правильный элемент navbar-collapse занимает больше места, чем ему нужно:

Как настроить элемент на использование только необходимой ему ширины без дальнейшего расширения?

Вот скрипка: https://jsfiddle.net/Zoker/ndv0ec54/

Answer 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, bootstrap.4.1.1 - потому что flex-*-grow-* классов не существует в старой его версии.

Answer 2

#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) { }, дажехотя это не оказывает вредного влияния ниже этой ширины.