Я только начал заниматься веб-разработкой в целом, поэтому мне может не хватать чего-то очень простого. Я пытаюсь использовать карты Bootstrap и тестировал три из них. Я хочу, чтобы карта умещалась в 3 строки на большом экране, а затем go на 2 столбца, а затем в один столбец по мере уменьшения размера страницы. То же самое и с первыми двумя карточками, но последняя карточка не остается в той же строке, что и первые две, даже когда страница на рабочем столе отображается в полноэкранном режиме.
Кроме того, граница карточки для первая карта нормальная, но для второй карты нет. У третьей карты не только нет рамки, но и размер карты другой.
Мой код для всех трех карточек почти идентичен, за исключением незначительных различий в основном тексте карточки и источнике изображений. Никаких кастомных css я тоже не использую, только bootstrap.
Вот мой код для справки:
<div id="posts">
<div id="content" class="container">
<div class="row">
<div class="col-md-6 col-lg-4 col-lx-4">
<div class="card mt-4">
<a href="pages/01_25_18.html">
<img class="card-img-top" src="images/fulls/03.jpg" alt="...">
<div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-lg-4 col-lx-4">
<div class="card mt-4">
<a href="pages/10_28_16.html">
<img class="card-img-top" src="images/fulls/04.jpg" alt="...">
</div>
<div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-lg-4 col-lx-4">
<div class="card mt-4">
<a href="pages/10_28_16.html">
<img class="card-img-top" src="images/fulls/03.jpg" alt="...">
</div>
<div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
это то, что отображается как