html - 有没有办法在 Razor foreach循环中水平显示引导卡？

我有一个大脑放屁，我想显示引导卡使用我的每个循环在一个水平的方式。它是垂直的。
这是我的剃刀代码

@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 />

            }

这里是输出pic

最佳答案

删除换行符，并将display:inline-block;添加到具有类“card”的div的样式中。
下面是一个包含3个div实例的示例：

<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
  <img class="card-img-top" src="https://placekitten.com/g/200/200" alt="Card image cap" height="200" width="200" style="border-radius:.60rem;">
  <div class="card-block">
    <h4 class="card-title">Name</h4>
    <p class="card-text">Some quick example text to build</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

关于html - 有没有办法在 Razor foreach循环中水平显示引导卡？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43419462/