c# - 在每行三列中显示项目列表
问题描述
我有一个来自我的 C# Rest Api 的 c# 模型列表。前端应该有一行三列,下一组三列,依此类推。
我怎样才能做到这一点。我已经尝试过了,但它不显示其他数据。
@{ var i = 0; }
@foreach (var employee in Model.Employees)
{
@{ i++; }
<a href="#">@employee.Name</a>
@if(i%3 == 2)
{
<br/>
}
}
解决方案
使用引导程序!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
@foreach (var employee in Model.Employees)
{
<div class="col-sm-4">
<a href="#">@employee.Name</a>
</div>
}
</div>
</div>
</body>
</html>
在这种情况下,由于每行需要 3 名员工,所以一整行是 col-sm-12,所以我只是将 12 除以 3,即 4,所以我使用 col-sm-4。
推荐阅读
- reactjs - 我在反应中有 Matarial UI 日期选择器,我得到 2019-12-08T04:23:53.949Z,我想删除 T04:23:53.949Z?
- python-2.7 - 如何在python中使用正则表达式替换和保存文本文件中的单词
- c++ - ++c 和 c++ 增量何时在此处准确应用?
- javascript - Jquery在多个特殊字符后添加文本
- c - 在尝试编写 atoi 的递归版本时,itoa(n /10, s) 的含义是什么,为什么建议避免使用 static int i = 0?
- typescript - 我怎样才能确保所有的出口都是相同的类型?
- flutter - FutureBuilder 在使用底部导航栏在页面之间导航时继续执行
- javascript - 如何添加/删除类 NativeScript
- alexa - Alexa Skill Messaging API vs Alert/Remainder API
- matplotlib - 与艺术家一起保存 matplotlib 图的问题