#html #css #bootstrap-4
Вопрос:
Я хочу просматривать все карты в одном ряду, когда размер экрана устройства больше lg, а когда меньше, я хочу, чтобы они были сложены друг на друга. Но я не в состоянии достичь желаемого результата. Только 2 карты находятся в одном ряду, хотя я разделил строку на 4:4:4. Добавление к моей проблеме, когда размер устройства меньше, чем большой, карты сложены нормально, но ширина карт выходит за рамки и не уменьшается с уменьшением размера экрана, хотя я указал col-12.Я пробовал использовать пограничный бокс, но он не работает. Я вроде как новичок в HTML, так что будьте добры, помогите.
body { background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226)); } .box { background-color: white; border-radius: 10px; box-sizing: border-box; word-wrap: break-word; } .heading { text-align: center; font-size: 40px; } .top { color: grey; font-size: 15px; text-align: center; margin-bottom: 5px; } ul { list-style: none; font-size: 15px; text-align: left; padding-left: 0px; /* letter-spacing: .1rem; */ } ul.cross { color: grey; } ul.tick { margin-bottom: 0px; } ul.tick li:before { content: '✓'; font-size: 20px; font-weight: 100; padding-right: 5px; } ul.cross li:before { content: 'x'; font-size: 20px; font-weight: 100; padding-right: 5px; color: grey; } lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous"gt; lt;titlegt;Price taglt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="container "gt; lt;div class="row "gt; lt;div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2"gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt; lt;hr/gt; lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 "gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt; lt;hr/gt; lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 "gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt; lt;hr/gt; lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
Ошибочно помещать в сетку несколько классов интервалов, из-за чего столбцы становятся слишком большими для строки. Используйте сетку для структуры и поместите расстояние внутри для дизайна. Не смешивайте эти проблемы. Начальная загрузка уже применяется border-box .
Кроме того, хороший редактор укажет на недопустимый HTML, например, на горизонтальные правила внутри абзацев. (Они могли бы выйти на улицу, но я заменил их border-bottom классом Bootstrap в абзацах.)
Наконец, соглашение (и философия Bootstrap «mobile first») диктуют, что классы точек останова должны быть упорядочены с наименьшим первым в разметке, чтобы соответствовать фактическому каскаду CSS.
body { background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226)); } .box { background-color: white; border-radius: 10px; box-sizing: border-box; word-wrap: break-word; } .heading { text-align: center; font-size: 40px; } .top { color: grey; font-size: 15px; text-align: center; margin-bottom: 5px; } ul { list-style: none; font-size: 15px; text-align: left; padding-left: 0px; /* letter-spacing: .1rem; */ } ul.cross { color: grey; } ul.tick { margin-bottom: 0px; } ul.tick li:before { content: '✓'; font-size: 20px; font-weight: 100; padding-right: 5px; } ul.cross li:before { content: 'x'; font-size: 20px; font-weight: 100; padding-right: 5px; color: grey; } lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous"gt; lt;titlegt;Price taglt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12 col-lg-4"gt; lt;div class="box my-5 mx-5 mx-lg-2 p-3"gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center border-bottom"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt;lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;div class="col-12 col-lg-4"gt; lt;div class="box my-5 mx-5 mx-lg-2 p-3"gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center border-bottom"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt;lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;div class="col-12 col-lg-4"gt; lt;div class="box my-5 mx-5 mx-lg-2 p-3"gt; lt;p class="top"gt;FREElt;/pgt; lt;p class="text-center border-bottom"gt;lt;span class="heading"gt;$0lt;/spangt;lt;spangt;/monthlt;/spangt;lt;/pgt; lt;ul class="tick"gt; lt;ligt;Single Userlt;/ligt; lt;ligt;5GB Storagelt;/ligt; lt;ligt;Unlimited Public Projectslt;/ligt; lt;ligt;Community Accesslt;/ligt; lt;/ulgt; lt;ul class="cross"gt; lt;ligt;Unlimited Private Projectslt;/ligt; lt;ligt;Dedicated Phone Supportlt;/ligt; lt;ligt;Free Subdomainlt;/ligt; lt;ligt;Monthly Status Reportslt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; Комментарии:
1. «Ты-мастер-учитель, я-ученик». Что ж, спасибо.
2. хорошо, Спасибо. Не могли бы вы сказать мне, что происходит не так с моим кодом? Несмотря на то, что я дал классы интервалов и сетки вместе, я не понимаю, что происходит не так?
3. Я объяснил, что столбцы становятся слишком большими, чтобы вместить строку и контейнер. Они предназначены для совместной работы с полями, уже примененными Bootstrap. Вам следует использовать инспектор документов вашего браузера, чтобы посмотреть, что происходит, когда вы увеличиваете поля. Кроме того, я заменил ваши горизонтальные правила нижними границами. Смотрите обновленный ответ.