Bootstrap 4.0 响应动态网站的每行卡片数
Posted
技术标签:
【中文标题】Bootstrap 4.0 响应动态网站的每行卡片数【英文标题】：Bootstrap 4.0 Responsive Number of Cards Per Row For Dynamic Website 【发布时间】：2022-01-16 06:41:23 【问题描述】：我有一个有趣的问题。我正在使用 UI 上的 razor 语法在我的 .Net 5.0 应用程序中动态创建引导卡。
每 5 张卡片创建一个新行，因此我有 4 张卡片可见，与用户水平对齐。
在大多数屏幕尺寸上都可以正常工作。有 4 张卡片，或者在较小的屏幕上可以看到 1 或 2 张卡片水平对齐。
问题出在中等屏幕上，当它太小而不能连续放 4 张卡片，但又太大而不能降到每行 2 张卡片时。这会导致 3 张卡片可见，与用户，以及低于他们的第 4 次下降。它们都仍在同一个“行”元素内。
我看不出如何使用类属性来解决这个问题，因为行是动态创建并填充了 4 张卡片的。我也看不到如何在代码中修复它，因为我的 razor 函数不知道生成元素的屏幕尺寸是多少？任何建议都非常感谢...
cshtml代码：
<body class="body-bg-img">
<!-- This function checks if the card iteration is divisible by 4 to move to the next row -->
@
bool check(int i)
var iAsString = i.ToString();
int iLength = iAsString.Length;
if ((iLength == 1 && ((iAsString[0] - '0') % 4 == 0)) || iLength == 0)
return true;
else if (iLength > 1)
int last = iAsString[iLength - 1] - '0';
int secondLast = iAsString[iLength - 2] - '0';
if ((secondLast * 10 + last) % 4 == 0)
return true;
else
return false;
else
return false;
<!-- This function creates a row and populates the first card, the nested loop then populates 3
more cards on the same row before breaking out to the main loop again, which creates the next row.
The nested loop then populates the next row etc. NOTE: I have [snipped] out some code for posting
to make it easier to read. -->
@for (int i = 0; i < Model.MainArticleList.Count(); i++)
var item = Model.MainArticleList[i];
if (check(i))
<div class="container-body">
<div class="row align-content-center justify-content-center">
<!-- CREATE A NEW CONTAINER WITH ROW & ADD FIRST CARD IN ROW -->
@if (item.UserIdRef != "none")
[snip]
@if (item.RazorRef != "none")
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Bootstrap card properties are being populated here -->
</div>
else if (item.HREFRef != "none")
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Just a different card content type -->
</div>
@for (int j = i + 1; j < Model.MainArticleList.Count(); j++)
<!-- CREATE CARDS 2, 3 and 4 INSIDE THE EXISTING ROW -->
var item1 = Model.MainArticleList[j];
if (!check(j))
@if (item1.UserIdRef != "none")
[snip]
@if (item1.RazorRef != "none")
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Bootstrap card properties are being populated here -->
</div>
else if (item1.HREFRef != "none")
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Just a different card content type -->
</div>
else
break;
</div>
</div>
<br />
</body>
【问题讨论】：
【参考方案1】：诀窍是不要自己计算行和列，而是在 CSS 级别上进行计算。今天我们可以通过使用 flex-box 来做到这一点。这是 Bootstrap 4 已经使用的卡片布局card-deck。How to adjust the data in grid columns in placing the data dynamically from the backend
CSS
.card-deck .card
flex-basis: 100%;
@media (min-width: 992px)
.card-deck .card
flex-basis: calc(25% - 30px); /* #$grid-gutter-width */
如果.card 是剩余的卡片，您的设计要求应该告诉您让其增长。您可以在 CSS 中使用 flex-grow 1 或 0 来控制它。
通常您将其设置为 0 可能会为某些分辨率创建空白空间。
DEMO 1（1卡移动，2小，3中，4大）DEMO 2（1卡移动，3中）DEMO 3（1卡手机，2中卡）
为了使后端更加动态，您可以在后端选择卡片组有多少列，您可以使用帮助类来映射断点，如.two-col、.three-col、.four-col 等，如所示演示 2 和 3。
如果您确实必须使用行和列，请参阅我的other answer。
您可以使用模运算符 => amount % 4 计算剩余部分。
根据我的经验，我设法将其用于三列布局。
四列肯定会更加棘手。
另请注意，在 Bootstrap 5 上，这再次发生了变化，因为他们摆脱了卡片组。
在这里，您可以简单地使用 .row 和 .col，这又是在 CSS 中控制的。bootstrap 5 alpha 2 card deck example not showing like it is in documentation
【讨论】：
谢谢蒂姆。因此，为了清楚起见，我应该将它们全部放在一行上并使用 flex 使它们根据所有屏幕尺寸的要求跳到下一行？ （在我的解决方案中浪费了大量的编码工作！哎呀！：D） 是的，一排和一列 12。在里面放你的卡片组。如果您需要全角背景颜色，它将变成 1 节，1 行，1 列 12 和一个容器。 辛苦了，谢谢@Tim以上是关于Bootstrap 4.0 响应动态网站的每行卡片数的主要内容，如果未能解决你的问题，请参考以下文章
如何让 Vue 和 Bootstrap 4 每行显示 3 张卡片