时间戳

首页 > 解决方案 > 当屏幕很小时，将品牌和切换器保持在同一行 Bootstrap 4

bootstrap-4 - 当屏幕很小时，将品牌和切换器保持在同一行 Bootstrap 4

问题描述

使用 Bootstrap 4，我想出了如何制作一个通用导航，其中品牌位于左侧，链接位于右侧。当屏幕尺寸低于中等时，我还能够使其折叠为切换器。我的问题是，对于多字品牌，当屏幕变得太小时，切换器会低于品牌。我想要的是让多词品牌在自身下方折叠并保持切换器正确。此外，使用“navbar-brand”完全禁止多词品牌崩溃。我不得不只使用“nav-link”来代替我的品牌让它崩溃。

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>


<nav class="navbar navbar-expand-md bg-light navbar-light border-bottom shadow-sm">
  <a class="nav-link" href="#"><font color="7c0000">THIS BRAND HAS A LOT OF WORDS IN IT</font></a>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
    </ul>
  </div>  
</nav>
</div>

</body>
</html>

标签： bootstrap-4

解决方案

这个 CSS 属性可以帮助...

  • 对于正常的屏幕尺寸，我们添加我们的类以确保长品牌标题只能占据屏幕的75%
  • 为了进一步增强它，我们在尺寸低于578px时移除填充
  • 为了进一步改进它，我们得到了仅占屏幕50%的长品牌名称

您可以更改这些数字以获得您想要的确切效果......

.nav-link {
  width: 75%;
}

@media screen and (max-width:478px) {
  .navbar {
    padding: 0
  }
}

@media screen and (max-width:300px) {
  .nav-link {
    width: 50%;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-light navbar-light border-bottom shadow-sm">
  <a class="nav-link" href="#">
    <font color="7c0000">THIS BRAND HAS A LOT OF WORDS IN IT</font>
  </a>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LINK</a>
      </li>
    </ul>
  </div>
</nav>

推荐阅读