Html 有没有办法在razor foreach循环中水平显示引导卡？

我有一个大脑屁，我想用我的for-each循环以水平方式显示引导卡。它是垂直的

这是我的剃须刀代码

@foreach (var item in Model)
{

    var imgUrl = Url.Content("~/Content/images/profile/" + Html.DisplayFor(model => item.userName) + ".png") + "?time=" + DateTime.Now.ToString();

            <div class="card" style="width: 20rem; text-align:center;">
                <img class="card-img-top" src="@imgUrl" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
                <div class="card-block">
                    <h4 class="card-title">@Html.DisplayFor(model => item.displayName)</h4>
                    <p class="card-text">Some quick example text to build</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>


            <br />
            <br />

            }

@foreach（模型中的变量项）
{
var imgUrl=Url.Content（“~/Content/images/profile/”+Html.DisplayFor（model=>item.userName）+“.png”）+“？time=“+DateTime.Now.ToString（）；
@DisplayFor（model=>item.displayName）
一些要构建的快速示例文本




}

---

以下是输出

删除换行符，并添加

显示：内联块到具有类“card”的div的样式

下面是一个包含3个div实例的示例：



名称
一些要构建的快速示例文本
名称
一些要构建的快速示例文本
名称
一些要构建的快速示例文本
谢谢，它成功了