Bootstrap Grid — почему мои столбцы перекрываются только на маленьких экранах?

Начальная загрузка 4.1

Я пытаюсь создать панель инструментов. Когда я уменьшаю размер браузера до меньшего размера, я ожидаю, что элементы div будут располагаться друг над другом, но это не так. Я пытался изменить расположение <div class = "container">, но, похоже, это ничего не меняет.

Если вы запустите фрагмент кода, я думаю, он покажет их сложенными, но перекрывающимися - в противном случае вот скриншот с перекрытием: Перекрытие ИМГУР

А вот как это выглядит на больших и средних: Не перекрывающийся IMGUR

Это как-то связано с высотой? Кажется, что он не соблюдает высоту 100 пикселей, когда он находится на большей ширине экрана.

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

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin = "anonymous">

  <title>Parking Spaces</title>
</head>

<body>
<!-- Space Display-->  
  <div style = "margin-top:20px;"></div>
  <div class = "container">
    <div class = "row" style = "height: 100px">
      <div class = "col-md-1 offset-md-1" style = "border:1px solid #333">
        <small>SPACE 11</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 10</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 9</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 8</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 7</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 6</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 5</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 4</small>
      </div>
      <div class = "col-md-1 bg-dark" style = "border:1px solid #333">
        <small>TIRE CAGE</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 2</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 1</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "height: 100px">
      <div class = "col-md-1 offset-md-5" style = "border:1px solid #333">
        <small>SPACE 12</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 13</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 14</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 15</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 16</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 17</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 18</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "height: 100px">
      <div class = "col-md-1 offset-md-8" style = "border:1px solid #333">
        <small>SPACE 19</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 20</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 21</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 22</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "height: 100px">
      <div class = "col-md-1 offset-md-8" style = "border:1px solid #333">
        <small>SPACE 23</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 24</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 25</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 26</small>
      </div>
    </div>
  </div>
  <!-- Bay Display -->
  <div style = "margin-top:20px;"></div>
  <div class = "container">
    <div class = "row text-center">
      <div class = "col-md-4">
        <h3>BAY 3</h1>
      </div>
      <div class = "col-md-4">
        <h3>BAY 2</h3>
      </div>
      <div class = "col-md-4">
        <h3>BAY 1</h3>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "height: 150px">
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 1</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 2</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 3</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "height: 150px">
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 4</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 5</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 6</small>
      </div>
    </div>
  </div>



    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity = "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
      crossorigin = "anonymous"></script>
</body>

</html>
html css bootstrap-4
06.04.2019 22:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
517
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Используйте min-height: 100px вместо height: 100px. Это позволит вашим строкам расти выше 100 пикселей, когда столбцы складываются на меньших экранах.

Купите настройку строк на height: 100px, вы ограничиваете их рост, когда столбцы складываются, а строки должны увеличиваться более чем на 100 пикселей при укладке, чтобы избежать перекрытия.

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

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin = "anonymous">

  <title>Parking Spaces</title>
</head>

<body>
<!-- Space Display-->  
  <div style = "margin-top:20px;"></div>
  <div class = "container">
    <div class = "row" style = "min-height: 100px">
      <div class = "col-md-1 offset-md-1" style = "border:1px solid #333">
        <small>SPACE 11</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 10</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 9</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 8</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 7</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 6</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 5</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 4</small>
      </div>
      <div class = "col-md-1 bg-dark" style = "border:1px solid #333">
        <small>TIRE CAGE</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 2</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 1</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "min-height: 100px">
      <div class = "col-md-1 offset-md-5" style = "border:1px solid #333">
        <small>SPACE 12</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 13</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 14</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 15</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 16</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 17</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 18</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "min-height: 100px">
      <div class = "col-md-1 offset-md-8" style = "border:1px solid #333">
        <small>SPACE 19</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 20</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 21</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 22</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "min-height: 100px">
      <div class = "col-md-1 offset-md-8" style = "border:1px solid #333">
        <small>SPACE 23</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 24</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 25</small>
      </div>
      <div class = "col-md-1" style = "border:1px solid #333">
        <small>SPACE 26</small>
      </div>
    </div>
  </div>
  <!-- Bay Display -->
  <div style = "margin-top:20px;"></div>
  <div class = "container">
    <div class = "row text-center">
      <div class = "col-md-4">
        <h3>BAY 3</h1>
      </div>
      <div class = "col-md-4">
        <h3>BAY 2</h3>
      </div>
      <div class = "col-md-4">
        <h3>BAY 1</h3>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "min-height: 150px">
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 1</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 2</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 3</small>
      </div>
    </div>
  </div>
  <div class = "container">
    <div class = "row" style = "min-height: 150px">
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 4</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 5</small>
      </div>
      <div class = "col-md-4" style = "border:1px solid #333">
        <small>SERVICE 6</small>
      </div>
    </div>
  </div>



    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin = "anonymous"></script>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity = "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
      crossorigin = "anonymous"></script>
</body>

</html>
06.04.2019 23:24

Вам просто нужно удалить высоту Ваш код

<div class = "row" style = "height: 100px">

должно быть

<div class = "row">

Это предотвратит желаемую высоту строк на размерах экрана рабочего стола.

— Coffee bean 06.04.2019 23:58

создайте новый класс, например .row_{ height:100px; } @media (max-width:767px){ .row_{ height:auto !important; } }, и добавьте к этому классу класс строк, например <div class = "row row_">

— Shoaib 07.04.2019 00:05
06.04.2019 23:26

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

Изменить цвет бумаги
Разделение текста строкой в ​​одном блоке с помощью css и html
Сложность сохранения дочерних элементов Div полностью квадратными
Плохое поведение плавающих меток при автозаполнении
Я не могу позволить контейнеру реагировать, когда я нажимаю на переключение устройства в инструменте chrome dev
Html-класс не работает в css? (несмотря на правильный синтаксис)
Возможен ли этот макет с чистым css?
Tailwind CSS — отзывчивые точки останова как компоненты
Я хочу использовать функцию Javascript в свойстве css
Динамические строки с использованием CSS Grid

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

Как сделать сложную таблицу с помощью HTML, как это
Ввод текста html с динамическими нулями
Разделение текста строкой в ​​одном блоке с помощью css и html
Как заменить первое вхождение каждой буквы в списке?
Как установить несколько классов для элемента с условным
Сделать модальное окно Bootstrap адаптированным к тексту
У моего Показать или скрыть DIV при щелчке по радио есть проблема
Я не могу позволить контейнеру реагировать, когда я нажимаю на переключение устройства в инструменте chrome dev
Попытка установить динамический заголовок данных в fancybox, но переменные с экранированными апострофами не выводят правильный формат заголовка
Html-класс не работает в css? (несмотря на правильный синтаксис)