我有一个Razor页面,我试图使用Bootstrap在行中显示<div>
元素。每个<div>
都是这样编程生成的:
@foreach (var item in Model)
{
<div class="col-4">
<!-- content -->
</div>
}
我的问题是,在每个<div>
之间有空格或返回字符或其他东西,这会导致最后一个<div>
被推到下一行。
因此,对于class="col-4"
,我 * 应该 * 能够将3个元素压缩到一行中。但第三个被推到下一排。通常,当我硬编码这类东西时,我删除了每个<div>
之间的所有空格,它解决了这个问题:
<!-- THIS WORKS -->
<div class="col-4">
<!-- content -->
</div><div class="col-4">
<!-- content -->
</div><div class="col-4">
<!-- content -->
</div>
<!-- THIS DOESN'T WORK -->
<div class="col-4">
<!-- content -->
</div>
<div class="col-4">
<!-- content -->
</div>
<div class="col-4">
<!-- content -->
</div>
我的问题是当我以编程方式渲染每个div时,我如何实现这一点?
2条答案
按热度按时间djp7away1#
如果你在一个引导
row
中,并且只使用col-*
元素,那么空白就不重要了。你的代码样本有一些缺失的引号,这可能会把事情搞砸,但我不知道这是你的问题中的一个错字还是实际的代码输出。当引号被修复并放入
row
中时,我根本没有看到任何问题,甚至没有看到您提供的两个代码示例之间的任何差异f87krz0w2#
只是好奇,如果在循环中生成列div,是否有一个很好的理由来指定列宽?通过使用
col-4
类,您每次只能循环3个项目(当然,除非您将默认的$grid-columns
设置修改为大于12),并且由于您显然希望本例中的这些div是等宽的,您也可以使用col
,让div自动格式化。这样做会将所有元素保持在同一行上:
我不认为空格/换行符应该有什么区别...但听起来它的行为就像聚合的列宽超过了最大网格列,即使这不应该是这种情况(同样,假设默认的
$grid-columns
Sass变量值没有减少)。或者(或者另外),你可以尝试为容器使用内联flex显示类,如下所示: