Как добавить пространство между двумя кнопками?

В заголовке моей домашней страницы есть кнопка входа и регистрации. В настоящее время на широком экране между этими двумя кнопками нет места. На меньшем экране я развернул его, и осталось место.

Как сохранить пространство независимо от размера экрана?

Я пробовал добавить mb-2 в теги li и ul, но это работает только тогда, когда они сворачиваются.

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

<head>
  <meta charset = "utf-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1" />
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous"></script>
</head>

<body>
  <header>
    <nav class = "navbar navbar-expand-lg navbar-light bg-light">
      <div class = "container">
        <a href = "home" class = "navbar-brand">
          <img class = "img-responsive" src = "/image/logo.png" alt = "Logo" />
        </a>
        <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0">
            <li class = "nav-item mb-2">
              <button type = "button" class = "btn btn-outline-primary btn-sm" mr-1 href = "#">
                  Register
                </button>
            </li>
            <li class = "nav-item mb-2">
              <button type = "button" class = "btn btn-primary btn-sm" href = "#">
                  Log in
                </button>
            </li>
          </ul>
          <form class = "d-flex">
            <input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" />
          </form>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>

К вашему сведению: mb-2 означает margin bottom 2 и добавит дополнительные поля под кнопками.

— 06.09.2024 07:19

html css bootstrap-5

06.09.2024 07:14

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

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

Панель навигации в Bootstrap использует Flexbox. Направление контролируется через flex-direction.
Имея это в виду, вы можете знать, что не следует добавлять margin, чтобы раздвинуть элементы списка друг от друга. Вместо этого используйте свойство gap в контейнере списка.

удалить mb-2 из <li>
добавьте gap-2 к <ul>

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

<head>
  <meta charset = "utf-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1" />
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous"></script>
</head>

<body>
  <header>
    <nav class = "navbar navbar-expand-lg navbar-light bg-light">
      <div class = "container">
        <a href = "home" class = "navbar-brand">
          <img class = "img-responsive" src = "/image/logo.png" alt = "Logo" />
        </a>
        <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0 gap-2">
            <li class = "nav-item">
              <button type = "button" class = "btn btn-outline-primary btn-sm" href = "#">
                  Register
                </button>
            </li>
            <li class = "nav-item">
              <button type = "button" class = "btn btn-primary btn-sm" href = "#">
                  Log in
                </button>
            </li>
          </ul>
          <form class = "d-flex">
            <input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" />
          </form>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>

Спасибо, это сделало именно то, что мне нужно.

— 06.09.2024 23:25

06.09.2024 07:30

Вы определили mr-1 вне определения класса для первой кнопки. Это должно быть me-1 внутри определения класса. Более подробную информацию вы можете найти здесь.

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous"></script>

<header>
  <nav class = "navbar navbar-expand-lg navbar-light bg-light">
    <div class = "container">
      <a href = "home" class = "navbar-brand">
        <img class = "img-responsive" src = "/image/logo.png" alt = "Logo" />
      </a>
      <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0">
          <li class = "nav-item mb-2">
            <button type = "button" class = "btn btn-outline-primary btn-sm me-1" href = "#">
                  Register
                </button>
          </li>
          <li class = "nav-item mb-2">
            <button type = "button" class = "btn btn-primary btn-sm" href = "#">
                  Log in
                </button>
          </li>
        </ul>
        <form class = "d-flex">
          <input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" />
        </form>
      </div>
    </div>
  </nav>
</header>

06.09.2024 07:41

Добавьте класс me-2 (margin-end) к кнопке «Зарегистрироваться». Это создаст пространство справа от кнопки «Регистрация», которое фактически отодвигает кнопку «Войти» от нее.

06.09.2024 08:42

Другие вопросы по теме

Есть ли способ автоматически разделить длинную таблицу HTML с тремя столбцами на большее количество столбцов?

Используйте начальную загрузку, CSS в HTML-коде приложения

Как я могу анимировать кнопку, не перемещая текст внутри?

Преобразуйте текст с помощью CSS в трапецию

Как идеально центрировать квадратный SVG внутри квадратной кнопки?

CSS имеет функцию, которая не работает, и не имеет селектора элементов

Как использовать обратный радиус границы в верхней части карты? (ССС)

Как я могу перевернуть все элементы флексбокса в CSS?

Как я могу создать пунктирную линию из двух цветов: серого и светло-серого?

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

Как добавить пространство между двумя кнопками?

Ответы 3

Другие вопросы по теме

Похожие вопросы