Bootstrap 5.2.3 Проблемы с пробелами/дополнением Scrollspy

Я пытаюсь создать новый шаблон для своего портфолио, используя список слева, чтобы сориентировать зрителя и предоставить простой способ доступа к разделам. Я использую Scrollspy в Bootstrap 5.2.3, и все выглядит нормально, за исключением того, что боковой список, кажется, имеет встроенное дополнение, которое тратит место на странице и создает слишком большое расстояние между списком и содержимым на больших страницах. Есть какие нибудь идеи как это починить? См. мою ручку для справки по коду. (большой серый прямоугольник вверху — это заполнитель для изображения.

Большое спасибо.

https://codepen.io/rachelmax/pen/MWBQzMd

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

<!doctype html>
<html lang = "en">

<head>
  <!-- Required meta tags -->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">

  <title>Testing Code 5</title>

  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">

</head>

<body>

  <div class = "pt-5" style = "height:500px; background:grey;">
  </div>

  <div class = "container-12">
    <div class = "row">

      <div class = "col-3">
        <nav id = "navbar-example3" class = "h-100 pe-5">
          <nav class = "nav nav-pills flex-column sticky-top">
            <a class = "nav-link" href = "#item-1">Problem</a>
            <a class = "nav-link" href = "#item-2">Team & Role</a>
            <a class = "nav-link" href = "#item-3">Research</a>
            <a class = "nav-link" href = "#item-4">Iterations</a>
            <a class = "nav-link" href = "#item-5">Results</a>
          </nav>
        </nav>
      </div>

      <div class = "col-8 mt-4">
        <div data-bs-spy = "scroll" data-bs-target = "#navbar-example3" data-bs-smooth-scroll = "true" class = "scrollspy-example-2" tabindex = "0">

          <div id = "item-1">
            <h5>Item 1</h5>
            <p>....</p>
          </div>

          <div id = "item-2">
            <h4>Item 2</h4>
            <p>....</p>
          </div>


          <div id = "item-3">
            <h4>Item 3</h4>
            <p>....</p>
          </div>
          <div id = "item-4">
            <h4>Item 4</h4>
            <p>....</p>
          </div>
          <div id = "item-5">
            <h4>Item 5</h4>
            <p>....</p>
          </div>

        </div>
      </div>
    </div>

  </div>


  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>

</body>

</html>

Пожалуйста, измените заголовок сообщения, чтобы задать четкий, конкретный вопрос. Не добавляйте теги. См. Как спросить.

— 23.01.2023 20:42

html css twitter-bootstrap bootstrap-5 scrollspy

23.01.2023 18:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Система сетки Bootstrap может адаптироваться ко всем шести точкам останова по умолчанию и к любым точкам останова, которые вы настраиваете. Шесть уровней сетки по умолчанию:
Очень маленький (xs)
Маленький (см)
Средний (МД)
Большой (лг)
Очень большой (xl)
Очень большой (XXL)

Сеточная система · Bootstrap v5.3

Каждая из этих точек останова имеет свой собственный контейнер, уникальный префикс класса и модификаторы. Так что в вашем случае вам придется настроить размер столбца для xl.

У вас также есть pe-5, что указывает на padding-right: 3rem !important;, что также увеличивает разрыв.

Ручка для Рэйчел

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

<head>
  <!-- Required meta tags -->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">

  <title>Testing Code 5</title>

  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">

</head>

<body>

  <div class = "pt-5" style = "height:500px; background:grey;">
  </div>

  <div class = "container-12">
    <div class = "row">

      <div class = "col-xl-1 col-3">
        <nav id = "navbar-example3" class = "h-100">
          <nav class = "nav nav-pills flex-column sticky-top">
            <a class = "nav-link" href = "#item-1">Problem</a>
            <a class = "nav-link" href = "#item-2">Team & Role</a>
            <a class = "nav-link" href = "#item-3">Research</a>
            <a class = "nav-link" href = "#item-4">Iterations</a>
            <a class = "nav-link" href = "#item-5">Results</a>
          </nav>
        </nav>
      </div>

      <div class = "col-xl-11 col-9 mt-4">
        <div data-bs-spy = "scroll" data-bs-target = "#navbar-example3" data-bs-smooth-scroll = "true" class = "scrollspy-example-2" tabindex = "0">

          <div id = "item-1">
            <h5>Framing the Problem</h5>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
            </p>
          </div>

          <div id = "item-2">
            <h4>Team & Role</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>

          <div id = "item-3">
            <h4>Research</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>
          <div id = "item-4">
            <h4>Iterations</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>
          <div id = "item-5">
            <h4>Results</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>

</body>

о, вот в чем проблема - я думал, что .pe-5 относится к «событиям указателя» и должен соотноситься с количеством элементов, которые отслеживает шпион прокрутки. Спасибо за выявление проблемы.

— 23.01.2023 22:50

23.01.2023 19:24