Как сделать ListView / DataView отзывчивым в начальной загрузке

Question

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

Я пытался использовать класс строки начальной загрузки как «строка», но теперь каждый новый сгенерированный «шаблон» являетсястрока, и они будут стоять друг под другом на экране любого размера ... если это имеет смысл?

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
    <asp:ListView ID="ListView1" runat="server" >
        <ItemTemplate>
            <div class="row">
                <asp:Button ID="Button1" runat="server" Text='<%#Eval("ProductNaam") %>' />
                <br />
                <br />
                <div><%#Eval("ProductName") %></div>
                <br />
                <br />

                <div><%#Eval("description") %></div>
                <br />
                <br />
                <div><%#Eval("price") %></div>
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

protected void Page_Load(object sender, EventArgs e)
    {
        using (SqlConnection objCn = new SqlConnection())
        {
            objCn.ConnectionString = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;

            using (SqlCommand objCmd = new SqlCommand())
            {
                objCmd.Connection = objCn;
                objCmd.CommandType = System.Data.CommandType.Text;
                objCmd.CommandText = "SELECT * FROM TblProducten;";

                objCn.Open();

                SqlDataAdapter Adapter = new SqlDataAdapter();
                Adapter.SelectCommand = objCmd;

                DataSet Myds = new DataSet();
                Adapter.Fill(Myds);

                ListView1.DataSource = Myds;
                ListView1.DataBind();
            }
        }
    }

Я ожидал, что он будет отзывчивым, но это было не так, как у меняуже описано

Answer 1

Оберните ваш "asp: ListView" в div с классом "row", затем используйте столбцы системы сетки, чтобы получить желаемое поведение.

Приведенный ниже пример должен помочь вам начать:

<div class="row">
    <asp:ListView runat="server" ID="ListView1">
        <ItemTemplate>
            <div class="col-sm-4 border p-3">
                <asp:Button ID="Button1" runat="server" Text='<%#Eval("ProductNaam") %>' />
                <br />
                <br />
                <div><%#Eval("ProductName") %></div>
                <br />
                <br />

                <div><%#Eval("description") %></div>
                <br />
                <br />
                <div><%#Eval("price") %></div>
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

Как уже упоминалось @Ben, прочитайте документы по начальной загрузке по этой теме: https://getbootstrap.com/docs/4.2/layout/grid/