Карты начальной загрузки правильно сложены
У меня есть колода бутстрап-карт, которая выглядит следующим образом:
<div class = "card-deck">
<div class = "card">
<img class = "card-img-top" src = ".." alt = "Card image cap">
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class = "card-text"><small class = "text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class = "card">
<img class = "card-img-top" src = ".." alt = "Card image cap">
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class = "card-text"><small class = "text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class = "card">
<img class = "card-img-top" src = ".." alt = "Card image cap">
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class = "card-text"><small class = "text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Проблема в том, что я хочу, чтобы они складывались таким образом, чтобы строки выглядели одинаково. В настоящее время, когда экран имеет такой размер, что две карты находятся сверху, а одна - снизу, карты имеют разные размеры. Я хочу, чтобы карты всегда были одного размера друг с другом, и в случае, когда есть 3 карты, и только 2 подходят по горизонтали, 3-я карта имеет тот же размер, что и 2 сверху, но с плавающей точкой. слева. Проблема, с которой я столкнулся, заключается в том, что я не могу просто установить минимальную и максимальную ширину, поскольку размер карточек меняется, я просто хочу, чтобы их размер всегда менялся вместе, чтобы они были одинаковыми. текущий результатпример желаемого результата
Хотелось бы, чтобы результат был желаемым (без карточки справа внизу)
Возможно, вам придется использовать JavaScript, чтобы определить, какая карточка имеет наибольшую ширину или наибольшую высоту, а затем принудительно применить это значение ко всем карточкам, загруженным на страницу. вы можете сделать это при загрузке окна или изменении размера окна, или и то, и другое.
Я чувствую, что должен быть простой способ сделать это с помощью начальной загрузки.
Эта публикация может быть вам полезна - stackoverflow.com/questions/46611092/…
Ответы 2
Может быть, попробуйте завернуть свои карточки в контейнер, а затем ряды.
Поскольку такое поведение не ожидается для карточек, попробуйте разместить их внутри строк и столбцов и добавить ожидаемый размер для каждого столбца.
<div class = "row">
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card">
...
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card">
...
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card">
...
</div>
</div>
</div>
если у вас в итоге получаются карты разной высоты, добавьте правило где-нибудь или новый класс с правилом для height: 100%; и примените его к карте.
Это хорошо работает. Единственное, что вроде ожидает 4 карты. Если есть 3 карты, а ширина экрана слишком велика, будет много неиспользуемого места. Карточки должны заполнять всю сумму, отведенную на экране, без отступов.
Может быть, как-нибудь добавить желаемый пример с тремя карточками? вы хотите, чтобы третья карта занимала все пространство? вы можете сделать это с col-sm-12
В основном мне просто нужно изменить точки останова начальной загрузки, чтобы исправить это. Для lg я хочу, чтобы он сломался на 1000, а не на 767. Знаете ли вы простой способ перезаписать это, не обращаясь к файлам ядра? Я попытался переписать медиа-запрос, но ничего не сделал.
используйте! important для каждого правила, также попробуйте разместить стили на html-странице вместо таблицы стилей, поскольку они применяются в следующем порядке важности: прямой атрибут стиля, стиль между тегами стилей внутри html-страницы, стиль, загруженный из файлов .
Но я бы не рекомендовал менять точки останова cols, создавать свой собственный класс и применять его для переопределения. и если вы что-то измените в своих файлах, выполните жесткую перезагрузку, стирая кеш
Я думаю, что даже с переопределением запроса существует несколько запросов, поэтому сложно найти, какие из них нужно изменить.
я думаю, вам нужен xl вместо lg!
Привет, я бы посоветовал отредактировать ваш пост. Вы можете, например, включить снимок экрана с текущим результатом, а также желаемый результат, привести несколько примеров того, что вы пробовали, и, что наиболее важно, сформулировать свой вопрос. stackoverflow.com/help/how-to-ask