从Repeater Control生成的Div不在适当的CSS样式中

时间:2015-02-16 09:17:41

标签: asp.net html5 css3 twitter-bootstrap

我通过 Repeater Control 生成div元素。生成DIV元素,但它的CSS格式不正确。

这是我的HTML代码:

<asp:Repeater ID="rptr" runat="server">
        <ItemTemplate>
            <div class="col-lg-4 col-md-4 col-sm-4 mb">
                <a href="VendorProfile.aspx">
                    <div class="twitter-panel pn">
                        <i class="fa fa-twitter fa-4x"></i>
                        <%# DataBinder.Eval(Container.DataItem, "Name") %>
                    </div>
                </a>
        </ItemTemplate>

    </asp:Repeater>

CSS:

.col-lg-4 {
    width: 33.33333333%;
  }

.col-md-4 {
    width: 33.33333333%;
  }
.col-sm-4 {
    width: 33.33333333%;
  }

.mb {
    margin-bottom: 25px;
}

.twitter-panel {
    background: #4fc1e9;
    text-align: center;
}

.pn {
    height: 250px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-4x {
  font-size: 4em;
}

我认为我应该使用漂浮造型,但我不确定。这也只是样本,在我的项目中我会在后台有图像。所以可能没有图标(这里是推特的标志)。

如果是这种情况,我应该为此目的制作任何自定义CSS样式吗?

这是我的C#代码:

public partial class PastOrders : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["vendor"] != null)
        {
            if (!IsPostBack)
            {
                ArrayList values = new ArrayList();

                values.Add(new Testing
                {
                    Name = "Caterer"
                });

                values.Add(new Testing
                {
                    Name = "Florist"
                });

                values.Add(new Testing
                {
                    Name = "Cab Services"
                });

                rptr.DataSource = values;
                rptr.DataBind();
            }
        }
        else
        {
            Response.Redirect("VendorLogin.aspx");
        }
    }



    public class Testing
    {
        public string Name { get; set; }
    }

}

2 个答案:

答案 0 :(得分:1)

我认为您错过了</div>

的结束<div class="col-lg-4 col-md-4 col-sm-4 mb">标记

认为应该做的伎俩!

答案 1 :(得分:1)

在类md中编写这个样式,或者如果你在其他类中使用这个类,你可以再创建一个类,并且你只想在这个类上显示这个样式 .md {float:left;}

.md {display:inline-block;}