带有ASP Dalalist的Bootstrap产品组合项目

时间:2018-09-02 09:07:14

标签: asp.net bootstrap-4 datalist portfolio

我尝试在数据列表中使用引导投资组合项目 代码是

<div class="row">

    <asp:Panel ID="Pnl_prodL" runat="server" Width="100%">
        <asp:DataList ID="dlst_prodNP" runat="server" OnItemDataBound="dlst_prodNP_ItemDataBound" RepeatColumns="2" DataKeyField="id" Width="100%">
            <ItemTemplate>
                <div class="col-lg-6 portfolio-item" style="background-color: red">
                    <div class="card h-100">
                        <a href="#">
                            <img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                        <div class="card-body">
                            <h4 class="card-title">
                                <a href="#">Project Three</a>
                            </h4>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
            <FooterTemplate></FooterTemplate>
        </asp:DataList>
    </asp:Panel>

</div>

我遇到一个问题,我想要的就像链接Portfolio 2 Subheading中的示例一样 但是我所有记录的问题都是这样 my test page

那么谁能告诉我我的错误在哪里? 谢谢大家

1 个答案:

答案 0 :(得分:0)

根据您提到的链接,html应该看起来像这样

<div class="row">
  <div class="col-lg-6 portfolio-item">
    <div class="card h-100">

但是由于您将数据列表包装在面板中,因此您的html看起来像这样。

<div class="row">

    <div ID="Pnl_prodL"> // extra div from panel

        <div class="col-lg-6 portfolio-item" style="background-color: red">
              <div class="card h-100">

面板会在html中创建一个<div>元素。我不知道该面板的用途是什么,但是PlaceHolder具有大多数功能,而没有创建自己的div。 也许可以解决您的问题...