twitter bootstrap动态对齐缩略图

时间:2013-02-05 23:14:33

标签: asp.net twitter-bootstrap

我想让缩略图动态对齐,但我该怎么办呢?

我有以下代码:

HTML

      <div class="row-fluid">
        <ul class="thumbnails">

         <uc1:loadUsers runat="server" ID="loadUsers" />

        </ul>
      </div>

ASP.NET

这是一个UserControl

_str是一个字符串,它将被添加到文字控件中,并将其转换为HTML

                    _str =  "<li class='span3'>"
                        + "<div class='thumbnail'>"
                        + "<div class='caption'>"

                        + "<h3>" + _name + "</h3>"
                        + "<ul>"
                        + "<li><h5>" + _other + "</h5></li>"
                        + "<li><h5>" + _other + "</h5></li>"
                        + "<li><h5><img src='" + _imagePath + "'" + _size + " /> " + _other + "</h5></li>"
                        + "<br><li>"
                        + "<div class='btn-group'><button class='btn btn-info'>Options</button><button class='btn btn-info dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button><ul class='dropdown-menu'>"
                        + "<li><a href='users.aspx?delete=" + _id + "'><i class='icon-fire'></i> Delete</a></li>"
                        + "<li><a href='users.aspx?edit=" + _id + "'><i class='icon-edit'></i> Edit</a></li>"
                        + "</ul></div>"
                        + "</li>"
                        + "</ul>"

                        + "</div>"
                        + "</div>"
                        + "</li>";

我知道class ='row-fluid'负责对齐,我该如何使用它?

as you can see the thumbnails aren't aligned and i want them to stay perfectly aligned

1 个答案:

答案 0 :(得分:1)

问题在于我正在插入<li>但是在HTML中我没有<ul>,这就是动态未配置的原因。 所以我在动态控件的开头和结尾插入了<div></div>

我很容易解决这个问题:

_str =  "<div><li class='span3'>"
                    + "<div class='thumbnail'>"
                    + "<div class='caption'>"

                    + "<h3>" + _name + "</h3>"
                    + "<ul>"
                    + "<li><h5>" + _other + "</h5></li>"
                    + "<li><h5>" + _other + "</h5></li>"
                    + "<li><h5><img src='" + _imagePath + "'" + _size + " /> " + _other + "</h5></li>"
                    + "<br><li>"
                    + "<div class='btn-group'><button class='btn btn-info'>Options</button><button class='btn btn-info dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button><ul class='dropdown-menu'>"
                    + "<li><a href='users.aspx?delete=" + _id + "'><i class='icon-fire'></i> Delete</a></li>"
                    + "<li><a href='users.aspx?edit=" + _id + "'><i class='icon-edit'></i> Edit</a></li>"
                    + "</ul></div>"
                    + "</li>"
                    + "</ul>"

                    + "</div>"
                    + "</div>"
                    + "</li></div>";