Как заставить встать элементы горизонтально, а не вертикально в колонке bootstrap 5?

Question

[Виктор Кокорич]

Как заставить встать элементы горизонтально, а не вертикально в колонке bootstrap 5? Имеется ввиду то, что в col-12 4 элемента, они встают один за другим, а мне надо с линейку, как решить? Заранее спасибо!

Comments

[Антон Литвиненко]

и вопрос прочитал и ответ и комментарий и все равно не понял что нужно

[Виктор Кокорич]

Антон Литвиненко, Вот отрывок:

<div class="row">
                <div class="slider col-12 text-right">
                    <div class="slider_wrapper">
                        <div class="slider_item"></div>
                        <div class="slider_item"></div>
                        <div class="slider_item"></div>
                        <div class="slider_item"></div>
                    </div>
                </div>
            </div>

Они встают вертикально, один за другим, а нужно горизонтально

[Антон Литвиненко]

Виктор Кокорич, а как они по вашей логике должны встать? вы в ряд (эмент row) положили ОДНУ колонку на всю ширину (col-12), в ней еще один див на всю ширину и уже в нем 4 слайда

[Антон Литвиненко]

Виктор Кокорич, Для слайдера не надо использовать сетку, слайдер сам это делает, исходя из настроек
пример сетки на 4 элемента

<div class="row">
	<div class="col-md-3">
		<div class="item"></div>
	</div>
	<div class="col-md-3">
		<div class="item"></div>
	</div>
	<div class="col-md-3">
		<div class="item"></div>
	</div>
	<div class="col-md-3">
		<div class="item"></div>
	</div>
</div>

Не миксуйте классы сетки с элементами, особенно если собираетесь из стилить. сетка отдельно - элементы в сетке отдельно

[Виктор Кокорич]

Антон Литвиненко, Спасибо за ответ, я бы так и сделал, просто элементы слишком маленькие, чтобы выдать им даже по 1 колонке, вот так должно быть, как это реализовать?

[Антон Литвиненко]

Виктор Кокорич, это dots. Точки. Навигация слайдера. Она тоже включается в настройках. Потом стилями делаете её из кружков в прямоугольники.
Сетка бутстрап а используется там где она уместна а не везде

[Виктор Кокорич]

Антон Литвиненко, Понял, спасибо большое, тоесь в некоторых случаях можно не использовать колонки, а просто поставить в ряд например с помощью inline-block? В любом случае, огромное спасибо

[Виктор Кокорич]

Антон Литвиненко, Имеется ввиду через js? Я просто еще его не изучал, пока практикуюсь

[Антон Литвиненко]

Виктор Кокорич, если вы не планируете делать это слайдером, то и точки можно не делать

Answer 1

[Алексей Голягин]

Это обычный слайдер как я понял из диалога выше: https://bootstrap5.ru/docs/components/carousel#wit... - вот с дотс слайдер из его разметки убрать (удалить) боковые стрелки:

<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>