ASP. NET C# - отображать фотографии динамически и перечислять их с помощью boostrap

Question

Я работаю над своим ASP. NET проектом. У меня был веб-сайт stati c, теперь я конвертирую его в динамический веб-сайт c.

Это разметка, которую я использовал для отображения фотографий на моем веб-сайте stati c:

<div class="col-lg-4 col-md-6 galeri-item filter-app">
<div class="galeri-wrap">
<img src="img/galeri/resim1.jpeg" class="img-fluid">
</div>
</div>

Это внешний вид моего веб-сайта stati c с кодом, который я использую (уже указан код с верхней стороны):

Сейчас я работаю над своим динамическим c сайтом. Я отображаю свои изображения из папки в бэкэнде следующим образом

  protected void Page_Load(object sender, EventArgs e)
  {
        if (!IsPostBack)
        {
            string[] filePaths = Directory.GetFiles(Server.MapPath("~/img/galeri/"));
            List<ListItem> files = new List<ListItem>();

            foreach (string filePath in filePaths)
            {
                string fileName = Path.GetFileName(filePath);
                files.Add(new ListItem(fileName, "~/img/galeri/" + fileName));
            }

            dtlist.DataSource = files;
            dtlist.DataBind();
        }
    }

Я показываю свои фотографии во внешнем интерфейсе с этим кодом. Я также попытался добавить свой код bootstrap, но он просто перечислил их все в столбце. Как я могу это исправить? Буду рад, если вы поможете мне.

<asp:DataList ID="dtlist" runat="server" >
  <ItemTemplate>
  <asp:Image ImageUrl='<%# Eval("Value") %>' runat="server"  CssClass="row galeri-container col-lg-4 col-md-6 galeri-item filter-app galeri-wrap img-fluid"/>
  <span>-</span>
 </ItemTemplate>
 </asp:DataList>

Answer 1

Если bootstrap столбцов превышает 12, он будет перенесен в новую строку

<div class="row">
<asp:DataList ID="dtlist" runat="server" >
<ItemTemplate>
    <div id="listItem" class="col-md-4">
        <asp:Image ImageUrl='<%# Eval("Value") %>' runat="server" />
    </div>
</ItemTemplate>
</asp:DataList>

</div>