Question

我有一行菜单选项卡，下面有一行面包屑。当屏幕折叠时，菜单选项卡的行将替换为右侧的汉堡包图标，这是正确的。但是，在4.0.0 alpha 6引导程序中，汉堡包图标掉到了面包屑行上，但在4.1.3版本中，它停留在自己的行上。 4.1.3中有什么方法可以强制执行以前的行为？显示2行而不是1行会浪费空间，而在小屏幕上这很烦人。这是一个代码段：

<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Put hamburger icon onto breadcrumb line</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>
<body>

<div class="container-fluid">

<h1>Put hamburger icon onto breadcrumb line</h1>

<nav class="navbar navbar-expand-md navbar-light">
  <span class="navbar-brand"></span>
  <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav nav-tabs mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #6</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #7</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #8</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #9</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tab #10</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Crumb #1</a>
  <span class="breadcrumb-item active">Crumb #2</span>
	<span class="breadcrumb-item active">Crumb #3</span>
</nav>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>

</body>
</html>

Answer 1

这符合您的需求吗？

@media (max-width: 767px) {
  .navbar .navbar-toggler {
    position: absolute;
    right: 5px;
    bottom: -44px;
  }

  .breadcrumb {
     padding-right: 66px !important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


  <div class="container-fluid">

    <h1>Put hamburger icon onto breadcrumb line</h1>

    <nav class="navbar navbar-expand-md navbar-light">
      <span class="navbar-brand"></span>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <ul class="navbar-nav nav-tabs mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #6</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #7</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #8</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #9</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Tab #10</a>
          </li>
        </ul>
      </div>
    </nav>

    <nav class="breadcrumb">
      <a class="breadcrumb-item" href="#">Crumb #1</a>
      <span class="breadcrumb-item active">Crumb #2</span>
      <span class="breadcrumb-item active">Crumb #3</span>
    </nav>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
  </script>

如何将汉堡包图标放在下一行？

1 个答案: