Как автоматически центрировать содержимое строки сетки при изменении размера экрана

Question

Я пытаюсь создать сайт с бутстрапом и другими ресурсами css, и я пытаюсь исправить следующую проблему за последние 2 дня, и я думаю, что выиграл Невозможно это исправить.

У меня есть ряд из 50 карт 250x250 с левым краем 30px. Когда я нахожусь на полном экране, у меня нет проблем. Однако, когда я меняю размер экрана, возникает огромный разрыв между последней карточкой и границами экрана. Это продолжается до тех пор, пока браузер не сможет заполнить пустое место следующей картой.

Я не хочу иметь это пустое пространство и хочу, чтобы карты автоматически выравнивались по центру.

Я также разделил столбцы на 10 строк, но все же не было никаких изменений.

Есть ли способ исправить эту проблему? Скриншоты прилагаются для полноэкранного и меньшего экрана.

Вы также можете видеть сами от: http://sagtekin.com/letseat/maintest.php

Большое спасибо за ценную помощь.

Answer 1

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

В двух словах вы должны сделать свой содержащий div имеющим text-align: center. Я также дал margin-right и left от 15px, чтобы компенсировать расстояние и поддерживать центрирование.

Во-вторых, убедитесь, что классы столбцов имеют смысл и вписываются друг в друга математически! Я завернул ваши изображения в col-lg-12 и обернул ваши изображения в col-lg-4, чтобы их было не менее 3. Отрегулируйте размер изображения, как вы сочтете нужным, я сделал уменьшенные изображения, чтобы вы могли более быстро реагировать на скрипку.

.container { 
text-align: center; 
} 

#card { 
background: #FAFAFA; 
width: 150px; 
height: 150px; 
margin-bottom: 30px; 
margin-left: 15px; 
margin-right: 15px; 
overflow: hidden; 
display: inline-block; 
} 

#card h2 { 
background-color: #3F51B5; 
opacity: 0.9; 
text-align: center; 
position: absolute; 
margin: 0px; 
width: 150px; 
} 

img { 
float: left; 
} 

Вот скрипку https://jsfiddle.net/gward90/oygyj9qd/

Answer 2

1. У вас есть несколько раз id карта, использование class.
2. Не устанавливайте width в колонке div s, пусть это сделает бутстрап. (Фиксированный размер и отзывчивый дизайн не слишком хорошо смешиваются.)
3. Используйте тег img, если вы действительно не хотите, чтобы изображение было в фоновом режиме, а затем наложили что-то поверх него, что диктует размер.

Если вы это сделаете, контейнер будет вести себя так, как вы ожидаете.