Выравнивание ящиков на 2x3
У меня на сайте есть эти коробки: 4 по горизонтали и 2 под ним. Но я хочу, чтобы он был 2x3, чтобы было 3 сверху и 3 снизу, чтобы он выглядел более чистым и профессиональным, но я не могу заставить код действительно это сделать.
Вот пример:
Вот код, который у меня есть для этого:
<div class = "tab-content">
<!--======= HOURLY =========-->
<div class = "tab-pane active" id = "hrs" role = "tabpanel">
<!--======= PRICING ROW =========-->
<ul class = "row"></ul><!--======= PRICE TABLE 1 =========-->
<div align = "center">
<ul>
<li class = "col-sm-6 col-md-3">
<div class = "price-inner">
<div class = "price-head">
<h4><b>Basic Package</b></h4>
</div>
<p>32 Hours Of Clasroom</p>
<p>14 Hours of in-car instruction</p>
<p>Meets State Requirement</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/basic-package/">Choose Package</a>
</div>
</li>
</ul>
</div><!--======= PRICE TABLE 2 =========-->
<ul>
<li class = "col-sm-6 col-md-3">
<div class = "price-inner">
<div class = "price-head">
<h4><b>Cruiser Package</b></h4>
</div>
<p>32 Hours Of Clasroom</p>
<p>14 Hours of in-car instruction</p>
<p>DADAP Certificate</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/cruiser-package/">Choose Package</a>
</div>
</li><!--======= PRICE TABLE 3 =========-->
<li class = "col-sm-6 col-md-3">
<div class = "price-inner">
<div class = "price-head">
<h4><b>V.I.P Package</b></h4>
</div>
<p>32 Hours Of Clasroom</p>
<p>14 Hours of in-car instruction</p>
<p>Priority Scheduling</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/vip-package/">Choose Package</a>
</div>
</li><!--======= PRICE TABLE 4 =========-->
<li style = "list-style: none; display: inline">
<div class = "mobileHide">
</div>
</li>
<li class = "col-sm-6 col-md-3">
<div class = "price-inner papu">
<div class = "price-head">
<h4><b>Road Lighting</b></h4>
</div>
<p>32 Hours Of Clasroom</p>
<p>14 Hours of in-car instruction</p>
<p>Lighting Fast Finish</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/road-lightning-package/">Choose Package</a>
</div>
</li><!--======= PRICE TABLE 4 =========--><br>
<li class = "col-sm-6 col-md-3">
<div class = "price-inner">
<div class = "price-head">
<h4><b>Blitz Package</b></h4>
</div>
<p>Customizable Schedule</p>
<p>32 Hours Of Clasroom</p>
<p>14 Hours of in-car instruction</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/blitz-package/">Choose Package</a>
</div>
</li><!--======= PRICE TABLE 4 =========-->
<li class = "col-sm-6 col-md-3">
<div class = "price-inner">
<div class = "price-head">
<h4><b>Drive Only Package</b></h4>
</div>
<p>7 Hours behind the wheel</p>
<p>7 hours of in-car observation</p>
<p>Meets State Requirement</p><a class = "btn" href = "http://championsdrivingschools.com/checkout/product/drive-only-package/">Choose Package</a>
</div>
</li>
</ul>
</div>
</div>
</div>Если кто-то может помочь мне с этим, я действительно не знаю, что делать, чтобы сделать это 2x3
@Styx Я только что это сделал, и это выглядело довольно круто. Как его выпрямить и выровнять? i.imgur.com/2CJzn15.png
Вы пропустили замену col-md-3.
@Styx Пока что все хорошо! i.imgur.com/SkEtYtI.png и еще кое-что. Как добавить пробел, чтобы разделить верхнюю и нижнюю строки
col- должны быть прямыми потомками .row. В вашей разметке дело обстоит иначе. Прочитайте это .. В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.@zgood Это не значит, что столбцы нужно размещать только по строкам :)
@Styx Спасибо за вашу помощь! Пока все идет хорошо. Вы знаете, как я могу добавить пробел между верхней и нижней строкой i.imgur.com/SkEtYtI.png
@DaltonMetzler Просто добавьте класс mb-2 сразу после col-md-4
@Styx уверен, что вы можете размещать столбцы где угодно. Но я хотел сказать, что Bootstrap предназначен для использования столбцов внутри строк. Зачем с этим бороться? В Bootstrap 3 столбцы должны быть в строках, чтобы очистить float, а в Bootstrap 4 им нужна строка в качестве контейнера flexbox. Если вы используете фреймворк так, как он был разработан, у вас будет меньше проблем.
@zgood Я согласен, но вы видели макет OP? У первой цены свой <ul>, у других пяти - другой. Если он добавит class = "row" к обоим ul, вся компоновка сломается.
Вы используете Bootstrap?
Просто замените
col-md-3наcol-md-4.