Nano Hash - криптовалюты, майнинг, программирование

Как получить горизонтальную прокрутку до панели навигации в bootstrap 4, когда есть много элементов навигации

Как прокручивать элементы панели навигации в меню начальной загрузки, когда их много.

мой код

<nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top">
      <a class="navbar-brand" href="/">Brand name</a>


            <a class="btn btn-danger shadow-sm mr-sm-2 text-white" role="button" href="/demo"> Button</a>



      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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>
          ....
        </ul>  
<a href="/search" class="btn btn-info shadow-sm text-white" role="button">Search</a>
      </div>
    </nav>

Я старался

.navbar-collapse { максимальная высота: 100vh; переполнение-у: прокрутка; }

Но я получаю вертикальную полосу прокрутки на панели навигации, например это.

css bootstrap-4
26.06.2019

  • во-первых, overflow-y: scroll; не по горизонтали, а по вертикали. Вы пробовали overflow-x: scroll; ? 26.06.2019
  • @NidhinJoseph Это работает, но показывает полосу прокрутки, хотя ширина сайта достаточна для размещения элементов навигации. 26.06.2019
  • любая скрипка, чтобы помочь? Я пробовал в скрипке, и без прокрутки все выглядит нормально. Просто попробуйте это jsfiddle.net/nidhingeorgejoseph/pqr7sgdz/2 26.06.2019
  • пожалуйста, используйте overflow-x: auto; вместо overflow-x: scroll; auto поместит полосу прокрутки только при необходимости, почему scroll всегда будет иметь полосу прокрутки. 26.06.2019
  • Это сработало, спасибо... 26.06.2019
  • ура, приятель, продолжай кодировать :) 26.06.2019
  • @Nidhin опубликуйте рабочее решение как ответ, чтобы его можно было принять 26.06.2019
  • @Cray готово. Спасибо 26.06.2019

Ответы:


1

Хитрость заключается в том, чтобы изменить свойство overflow-x с scroll на auto.

overflow-x: auto; помещает полосу прокрутки только тогда, когда это необходимо, почему overflow-x: scroll; всегда будет иметь полосу прокрутки.

JSFiddle

26.06.2019

2

если вы хотите изменить горизонтальную полосу прокрутки с overflow-y:scroll на overflow-x :scroll или overflow-x:auto. overflow-x:autoдобавляет полосу прокрутки, если содержимое выходит за пределы

26.06.2019
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..