样式 asp：引导面板中的复选框列表答案

【问题标题】：Style asp:Checkboxlist in bootstrap panel样式 asp：引导面板中的复选框列表
【发布时间】：2015-10-18 23:53:44
【问题描述】：

我正在尝试为动态加载的复选框列表制作一个不错的布局，但在 CSS 方面却相当无能。我希望复选框填充面板主体中的空间，居中对齐，然后开始新行。重复列属性使它们成为一个漂亮的表格，但我无法将它们在面板主体中居中对齐。

HTML

<div id="chkBxDiv" runat="server" class="panel panel-danger">
    <div class="panel-heading">Attribute Removal</div>
    <div class="panel-body center-block">
        <asp:CheckBoxList ID="checkBoxList" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" cssclass="chkboxList"></asp:CheckBoxList>
    </div>
    <div class="panel-footer">
        <asp:Button ID="removeAttrBtn" class="btn btn-danger" runat="server" Text="Remove Selected Attributes" />
    </div>
</div>

private void populateCheckGrid()
{
    string virusId;
    using (VirusDescriptionActions usersVirus = new VirusDescriptionActions()){
        virusId = usersVirus.GetVirusId();
    }
    List<Virus_Item> currentVirus = getVirus(virusId);
    foreach (Virus_Item V in currentVirus)
    {
        ListItem item = new ListItem();
        item.Text = V.AttributeId.ToString();
        item.Selected = false;
        checkBoxList.Items.Add(item);
    }
}

【问题讨论】：

标签： html css asp.net twitter-bootstrap

【解决方案1】：

这是在 HTML 中呈现 asp:CheckBoxList 的方式：

<table id="MainContent_ctl00">
    <tbody>
        <tr>
            <td>
                <input id="MainContent_ctl00_0" name="ctl00$MainContent$ctl00$0" value="text1" type="checkbox">
                <label for="MainContent_ctl00_0">text1</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="MainContent_ctl00_1" name="ctl00$MainContent$ctl00$1" value="text2" type="checkbox">
                <label for="MainContent_ctl00_1">text2</label>
            </td>
        </tr>
    </tbody>
</table>

因此，为表格元素、输入和标签设置相应的 CSS 样式。一些建议：将表格和 td 宽度设置为 100%，将 td 文本对齐设置为居中。或者要以整个表格为中心，给它一个固定的宽度并将左右边距设置为自动。

【讨论】：