Растянуть любое количество пролетов внутри div

У меня есть собственная карусель, и я пытаюсь сделать навигацию.

.carousel-nav-box {
  width: 100%;
}

.carousel-nav-item {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width: auto;
  height: 5px;
  margin-left: 2px;
  margin-right: 2px;
  background: black;
  border: green;
}

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "carousel-nav-box container">
  <div class = "row">
    <span class = "col-sm carousel-nav-item"></span>
    <span class = "col-sm carousel-nav-item"></span>
  </div>
</div>

Пролеты внутри контейнера динамически генерируются из базы данных, поэтому их может быть любое количество. Проблема в том, что пролеты просто не тянутся на всю ширину контейнера и занимают только часть контейнера. Мне нужно сделать их на контейнере полной ширины и сделать их ширину автоматической в зависимости от их количества.

html css bootstrap-4

28.05.2019 10:00

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

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

Вы можете сгибать для достижения этой функциональности. Flex растянет все дочерние элементы; и они растянутся, если добавить гибкий: 1;

.carousel-nav-box {
  background-color: red;
  width: 100%;
}

.carousel-nav-box .row {
  display: flex;
}

.carousel-nav-item {
  min-height: 50px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: black;
  border: 1px solid green;
  flex: 1;
}

<div class = "carousel-nav-box container">
  <div class = "row">
    <span class = "col-sm carousel-nav-item"></span>
    <span class = "col-sm carousel-nav-item"></span>
    <span class = "col-sm carousel-nav-item"></span>
  </div>
</div>

28.05.2019 10:05

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

Как заполнить div, но сохранить соотношение сторон для дочерних div

Вложенные списки HTML отображают только первый элемент подсписка, который можно навести

Как сделать содержимое div не слишком растянутым

Woocommerce добавить изображение после кнопки добавления в корзину

Как добавить отступ к обводке круга SVG для простого пончика

Как я могу сделать так, чтобы последовательные промежутки nowrap были обернуты как отдельные элементы?

Меню навигации не открывается под заголовком для средних экранов с использованием начальной загрузки 4

Анимированный значок SVG увеличивает размер с помощью css

Почему `<input type='date' />` и `<input type='time' />` имеют проблемы с изменением в Firefox? Или я что-то упускаю?

Как я могу получить доступ к публичной переменной в laravel

Растянуть любое количество пролетов внутри div

Ответы 1

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

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