如何消除Razor页面循环生成的div间空白以适配Bootstrap布局？

问题背景 #

在Razor页面中使用Bootstrap实现行布局时，通过foreach循环生成col-4类的div元素：

@foreach (var item in Model)
{
    <div class="col-4">
        <!-- 内容区域 -->
    </div>
}

由于循环渲染出的div之间存在空白或换行符，浏览器会将其解析为空格，导致原本应该一行容纳3个的col-4元素，第三个被挤到下一行。手动消除div间的空白可以解决这个问题：

<!-- 有效写法 -->
<div class="col-4">
    <!-- 内容区域 -->
</div><div class="col-4">
    <!-- 内容区域 -->
</div><div class="col-4">
    <!-- 内容区域 -->
</div>

<!-- 无效写法 -->
<div class="col-4">
    <!-- 内容区域 -->
</div>
<div class="col-4">
    <!-- 内容区域 -->
</div>
<div class="col-4">
    <!-- 内容区域 -->
</div>

可行的编程解决方案 #

1. 压缩Razor代码的空白输出 #

直接调整Razor代码的排版，让div标签在渲染时连在一起，避免产生空白：

@foreach (var item in Model)
{
    <div class="col-4"><!-- 内容区域 --></div>
}

如果内容需要换行排版，可以使用Razor的@:语法强制输出，忽略代码块内的空白：

@foreach (var item in Model)
{
    @:<div class="col-4">
        <!-- 内容区域 -->
    @:</div>
}

2. 拼接HTML字符串后输出 #

用StringBuilder拼接所有div的HTML内容，再通过@Html.Raw直接输出，确保没有多余空白：

@{
    var htmlContent = new System.Text.StringBuilder();
    foreach (var item in Model)
    {
        // 替换为实际内容，注意特殊字符转义
        htmlContent.Append($"<div class=\"col-4\">{item.Content}</div>");
    }
}
@Html.Raw(htmlContent.ToString())

3. CSS全局消除空白影响 #

无需修改Razor代码，给父容器（通常是.row）设置font-size: 0，同时给col-4重置字体大小：

.row {
    font-size: 0;
}
.row .col-4 {
    font-size: 1rem; /* 恢复为项目所需的字体大小 */
}

浏览器会将空白字符解析为空格，font-size: 0会让空格宽度变为0，不再占用布局空间。

4. 切换为Bootstrap Flex布局 #

Bootstrap的Flex布局会自动忽略元素间的空白，给父容器添加d-flex flex-wrap类，子元素使用flex-basis-33（等价于col-4的宽度比例）：

<div class="d-flex flex-wrap">
    @foreach (var item in Model)
    {
        <div class="flex-basis-33 p-3">
            <!-- 内容区域 -->
        </div>
    }
</div>

p-3用于模拟col类默认的内边距，可根据需求调整。

内容的提问来源于stack exchange，提问作者TheIronCheek