Question

使用Bootstrap 4，我不知道自己在做错什么，但是好像我尝试过一样，无法使.navbar-toggler按钮浮动到右侧。我确定我只是忽略了一些小东西，但我不知道怎么了。

这是我的代码。

注意：您可能需要缩小窗口才能看到该按钮。

.title-bar {
  padding: 0px;
  margin: 0px auto;
}

.company-name {
  font-family: "Trajan Pro";
  font-size: 36px;
  margin: 0px auto -15px 5px;
}

.navbar-nav {
  width: 100%;
}

#seal {
  margin: -50px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
  <div class="container-fluid title-bar">
    <div class="navbar-header">
      <div class="d-flex flex-row d-md-none">
        <a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
          <img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
          <div class="company-name">
            <div class="text-center">Fake</div>
            <div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
          </div>
        </a>

        <button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="d-none d-md-block">
        <a class="navbar-brand company-name" href="#">Fake Company</a>
      </div>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-md bg-secondary navbar-dark">
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="nav navbar-nav d-flex">
      <li class="nav-item flex-fill text-center active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Profle</a></li>
      <li class="nav-item flex-fill text-center">
        <img class="d-none d-md-inline" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="coa" style="max-width:110px; width:50%" />
      </li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Products</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>
<div class="d-sm-none">
  extra small
</div>
<div class="d-none d-sm-block d-md-none">
  small
</div>
<div class="d-none d-md-block d-lg-none">
  medium
</div>
<div class="d-none d-lg-block d-xl-none">
  large
</div>
<div class="d-none d-xl-block">
  extra large
</div>

或者在JSFiddle中看到它。

Answer 1

navbar-header不再存在。删除它并制作内部flex dev w-100（宽度：100％）

<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
    <div class="container-fluid title-bar">
        <div class="d-flex flex-row d-md-none w-100">
            <a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
            <img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
                <div class="company-name">
                    <div class="text-center">Fake</div>
            <div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
            </div>
            </a>

            <button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
            </button>
            </div>
            <div class="d-none d-md-block">
                <a class="navbar-brand company-name" href="#">Fake Company</a>
            </div>
            </div>
        </nav>

https://jsfiddle.net/zxjk3pLn/

Answer 2

添加此内容，以便其容器.navbar-header遍布整个宽度，因此可以正确移动：

.navbar-header {
  width: 100%;
}

.title-bar {
    padding: 0px;
    margin: 0px auto;
}
.company-name {
    font-family: "Trajan Pro";
    font-size: 36px;
    margin: 0px auto -15px 5px;
}
.navbar-nav {
    width: 100%;
}
#seal {
    margin: -50px auto;
}
.navbar-header {
  width: 100%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
		<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
			<div class="container-fluid title-bar">
				<div class="navbar-header">
					<div class="d-flex flex-row d-md-none">
						<a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
							<img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
							<div class="company-name">
								<div class="text-center">Fake</div>
								<div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
							</div>
						</a>

						<button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
							<span class="navbar-toggler-icon"></span>
						</button>
					</div>
					<div class="d-none d-md-block">
						<a class="navbar-brand company-name" href="#">Fake Company</a>
					</div>
				</div>
			</div>
		</nav>

		<nav class="navbar navbar-expand-md bg-secondary navbar-dark">
	  		<div class="collapse navbar-collapse" id="collapsibleNavbar">
				<ul class="nav navbar-nav d-flex">
					<li class="nav-item flex-fill text-center active"><a class="nav-link" href="#">Home</a></li>
					<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">About Us</a></li>
					<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Profle</a></li>
					<li class="nav-item flex-fill text-center">
            <img class="d-none d-md-inline" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="coa" style="max-width:110px; width:50%" />
          </li>
					<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Products</a></li>
					<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Pricing</a></li>
					<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Contact Us</a></li>
				</ul>
			</div>
		</nav>
    <div class="d-sm-none">
      extra small
    </div>
    <div class="d-none d-sm-block d-md-none">
      small
    </div>
    <div class="d-none d-md-block d-lg-none">
      medium
    </div>
    <div class="d-none d-lg-block d-xl-none">
      large
    </div>
    <div class="d-none d-xl-block">
      extra large
    </div>

Answer 3

.container-fluid div设置为display: flex，因此直接嵌套在其中的元素不会自动占据100％的宽度。这包括.navbar-header元素。如果您将颜色背景临时添加到.navbar-header，您将看到它没有填充.container-fluid元素。

因此，在.navbar-toggler推到其父级的右侧时，问题在于父级没有扩展。您可以在width: 100%上添加flex-grow: 1或.navbar-header来解决此问题-两者都会导致其填充父对象的宽度。因为父级是一个flex容器，所以我更喜欢通过flex-grow进行设置，因为这对我来说更合乎逻辑，但是在这种情况下，两者都具有相同的效果。

在Bootstrap 4中，“。navbar-toggler”按钮不会向右浮动

3 个答案: