Как изменить точку останова навигации по CSS только в Bulma? - PullRequest
Новая
       7

Как изменить точку останова навигации по CSS только в Bulma?

0 голосов
/ 21 ноября 2018

ОБНОВЛЕНИЕ:

Я создал запрос функции на GitHub, вы можете отслеживать здесь .

Я использую Бульм .Прямо сейчас навигационная панель разваливается и превращается в меню бургера, когда ширина меньше 1088 пикселей.Я надеюсь, что он рухнет, только когда он меньше 768 пикселей или даже меньше.

Я прочитал отзывчивый документ , но все еще не могу найти способ изменить его только с помощью CSS.

Я надеюсь найти способ перезаписи без изменения исходного кода Bulma.Любая идея?Спасибо

jsfiddle 

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>
    </div>
  </div>
</nav>

1 Ответ

0 голосов
/ 21 ноября 2018

сначала вам нужно найти его css файл

, например, его docs.min.css

, затем такой код: - 

@media screen and (min-width: 1088px) {
    .navbar,.navbar-end,.navbar-menu,.navbar-start {
        align-items:stretch;
        display: flex
    }

^^^ этот кодвыполняет ли изменения, когда экран опускается ниже 1088

, в этом файле несколько кодов CSS, начинающихся с этого: - 

@media screen and (min-width: 1088px)

, поэтому вам нужно найти их все и заменить на 

@media screen and (min-width: 768px)

вот и все, задача выполнена на уровне css:)

...