Как поместить значок гамбургера в следующую строку? - PullRequest
Новая
       1

Как поместить значок гамбургера в следующую строку?

0 голосов
/ 27 августа 2018

У меня есть строка вкладок меню, под которой есть линия хлебных крошек. Когда экран сворачивается, строка вкладок меню заменяется значком гамбургера справа, что является правильным. Однако в bootstrap 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>

1 Ответ

0 голосов
/ 28 августа 2018

Это соответствует вашим потребностям? 

@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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...