Блог

Главная - Вопросы по программированию - Невозможно свернуть панель навигации начальной загрузки при определенном разрешении

Невозможно свернуть панель навигации начальной загрузки при определенном разрешении

#html #css #bootstrap-4 #navbar

#HTML #css #bootstrap-4 #панель навигации

Вопрос:

Я пытаюсь свернуть панель Bootstrap навигации, когда ширина экрана равна 1280 пикселей, но вместо того, чтобы свернуть панель навигации, панель навигации идет сверху, это мой код:

 body {
  padding-top: 90px;
}

@media (min-width: 1280px) {
  body {
    padding-top: 0;
  }
}

@media (min-width: 1280px) {
  body {
    margin-left: 232px;
  }
}

.navbar.fixed-left {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

@media (min-width: 1280px) {
  .navbar.fixed-left {
    bottom: 0;
    width: 232px;
    flex-flow: column nowrap;
    align-items: flex-start;
  }
  .navbar.fixed-left .navbar-collapse {
    flex-grow: 0;
    flex-direction: column;
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    top: 0;
  }
}

@media (min-width: 1280px) {
  .navbar.fixed-left {
    right: auto;
  }
  .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: none;
    vertical-align: baseline;
  }
  .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
    left: 100%;
  }
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
          id="theme_link"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/materia/bootstrap.min.css"/>
          
          <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-left">
    <a class="navbar-brand" href>Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Contact</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item">Action</a>
                    <a class="dropdown-item">Another action</a>
                    <a class="dropdown-item">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Separated link</a>
                    <a class="dropdown-item">One more separated link</a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-class="fixed-left">
                    <i class="fa fa-arrow-left"></i>
                    Fixed Left
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-class="fixed-top">
                    <i class="fa fa-arrow-up"></i>
                    Fixed Top
                    <small>(original)</small>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-class="fixed-right">
                    <i class="fa fa-arrow-right"></i>
                    Fixed Right
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">
            Bootstrap Navbar Sidebar
            <br>
            <small>Fixed to Left or Right</small>
        </h1>
        <p>
            <strong>
                Use classic Bootstrap navbar as sidebar, on left or right side.
            </strong>
        </p>
        <p>
            <a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar"
               data-icon="octicon-star" data-show-count="true"
               aria-label="Star mladenplavsic/bootstrap-navbar-sidebar on GitHub">Star</a>
            <a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar/fork"
               data-icon="octicon-repo-forked" data-show-count="true"
               aria-label="Fork mladenplavsic/bootstrap-navbar-sidebar on GitHub">Fork</a>
            <a class="github-button" href="https://github.com/mladenplavsic"
               aria-label="Follow @mladenplavsic on GitHub">Follow @mladenplavsic</a>
        </p>
        <p>Same as when using <code>.fixed-top</code> for navbar - add class <code>.fixed-left</code> or <code>.fixed-right</code>
            where needed.</p>
        <p>Click buttons below, and appropriate class will be added to example navbar.</p>
        <div class="btn-group" role="group">
            <button type="button" data-class="fixed-left" class="btn btn-primary">
                <i class="fa fa-arrow-left"></i>
                Fixed Left
            </button>
            <button type="button" data-class="fixed-top" class="btn btn-primary">
                <i class="fa fa-arrow-up"></i>
                Fixed Top
                <small>(original)</small>
            </button>
            <button type="button" data-class="fixed-right" class="btn btn-primary">
                <i class="fa fa-arrow-right"></i>
                Fixed Right
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <label>
                    Select another bootstrap theme from
                    <a href="https://bootswatch.com/" target="_blank">Bootswatch</a>
                </label>
                <select class="form-control width-md" id="theme_select" onchange="selectTheme(value)"></select>
            </div>
        </div>
    </div>


</div>

Как вы можете видеть, я установил 1280px в медиа-запросах, но по какой-то причине панель навигации вместо свертывания отображается как верхняя панель, что я сделал не так?

Комментарии:

1. Почему именно 1280px ? Использует Bootstrap @media (min-width:1200px) , поэтому у вас будут некоторые ненужные разрывы макета, и вам придется проделать дополнительную работу, чтобы создать узкое пространство между 1200px-1280px ними .

Ответ №1:

Ближайшая точка останова начальной загрузки находится в 1200px . Я бы рекомендовал придерживаться этого, потому что таким образом вы избежите чрезмерных изменений макета. Если вы хотите переместить свои точки останова @media 1200px в соответствие с Bootstrap, вы можете просто изменить свой класс .navbar-expand-md на .navbar-expand-xl , и все.

Codepen: https://codepen.io/Terrafire123/pen/NWRKdKR

Редактировать:

Если все, что вы хотите сделать, это просто запретить боковой панели перекрывать тело, вы можете добавить это:

 @media (min-width: 1200px) {
  body { 
    margin-left: 232px !important; 
  }
}

(Это уже существует в вашем исходном коде, но без !important него оно перезаписывается margin:0; настройками Bootstrap по умолчанию.)

Комментарии:

1. Если я меняю класс на navbar-expand-xl контейнер слева, не заполняются строки, кажется, что по какой-то причине точка останова срабатывает неправильно

2. @sfarzoso Кажется, что в этом Codepen все работает нормально: codepen.io/Terrafire123/pen/NWRKdKR . Возможно, я вас неправильно понимаю?

3. Я имею в виду, что правильный контейнер должен находиться рядом с панелью навигации, а не под ней: imgur.com/a/pLO4SU5 должно быть что-то вроде: mladenplavsic.github.io/bootstrap-navbar-sidebar но с разными точками останова

4. @sfarzoso Oh! Вы имеете в виду, что панель навигации и тело не должны перекрываться. Я отредактировал свой ответ.

5. @sfarzoso …. Вы правы, я это исправил. Спасибо. 1200px правильно, нет 1201px .

Метки: