我有一个脑屁我想用横向方式使用my为每个循环显示自举卡。它是垂直的。“
这是我的剃刀代码
@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
答案 0 :(得分:1)
删除换行符,并使用“card”类将div添加到display:inline-block;
样式。
以下是div的3个实例的示例:
<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>