1

我想将引导网格应用于 RadioButtonList 的 ListItem：

 Col-md-12
+-------------------------------------------------------------------+
|  Col-md-2      Col-md-2      Col-md-2      Col-md-2     Col-md-2  |
| +--------+    +--------+    +--------+    +--------+   +--------+ |
| | O rb1  |    | O rb2  |    | O rb3  |    | O rb4  |   | O rb5  | |
| +--------+    +--------+    +--------+    +--------+   +--------+ |
+-------------------------------------------------------------------+

我的 RadioButtonList 是：

<div class="col-md-12">
    <asp:RadioButtonList ID="rblCleanliness" RepeatDirection="Horizontal" runat="server">
        <asp:ListItem Value="1">rb1</asp:ListItem>
        <asp:ListItem Value="2">rb2</asp:ListItem>
        <asp:ListItem Value="3">rb3</asp:ListItem>
        <asp:ListItem Value="4">rb4</asp:ListItem>
        <asp:ListItem Value="5">rb5</asp:ListItem>
    </asp:RadioButtonList>
</div>

如何应用col-md-2到 RadioButtonList 的每个 ListItem？

<div class="col-md-2">
    <asp:ListItem Value="1">rb1</asp:ListItem>
</div>

更新：

我正在寻找的结果：

在此处输入图像描述

4

2 回答 2

1

使用 CSS 来显示它们：

#rblCleanliness{
    background-color:green; 
    border:  solid 2px black;
    height: 400px;
    width:400px;
    display: flex;
}
.col-md-12{
    width: 1000px;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box{
    border:dashed 2px black;
    display: flex;
    flex-grow: 1;
}

你的 html 应该有类

<div class="col-md-12">
    <asp:RadioButtonList ID="rblCleanliness" RepeatDirection="Horizontal" runat="server">
        <asp:ListItem Value="1" class="box 1">rb1</asp:ListItem>
        <asp:ListItem Value="2" class="box 2">rb2</asp:ListItem>
        <asp:ListItem Value="3" class="box 3">rb3</asp:ListItem>
        <asp:ListItem Value="4" class="box 4">rb4</asp:ListItem>
        <asp:ListItem Value="5" class="box 5">rb5</asp:ListItem>
    </asp:RadioButtonList>
</div>

并且对于引导版本将

#rblCleanliness{
    background-color:white; 
    border:  solid 2px black;
    height: 400px;
    width:400px;
    display:flex;
    justify-content: space-around;

}

.col-md-12{
    width: 1000px;
    height: 400px;

}

.box{
    border:dashed 2px black;
}

Bootstrap html 将是：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row col-md-12">
    <asp:RadioButtonList ID="rblCleanliness" RepeatDirection="Horizontal" runat="server">
        <asp:ListItem Value="1" class="box col-md-2 1">rb1</asp:ListItem>
        <asp:ListItem Value="2" class="box col-md-2 2">rb2</asp:ListItem>
        <asp:ListItem Value="3" class="box col-md-2 3">rb3</asp:ListItem>
        <asp:ListItem Value="4" class="box col-md-2 4">rb4</asp:ListItem>
        <asp:ListItem Value="5" class="box col-md-2 5">rb5</asp:ListItem>
    </asp:RadioButtonList>
</div>
</body>
于 2017-12-23T17:41:06.837 回答
0

我用过Col-md-12，Col-md-2就像这样：

<asp:RadioButtonList ID="rblCleanliness" CssClass="col-md-12" 
    RepeatDirection="Horizontal" runat="server">
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
</asp:RadioButtonList>
于 2017-12-24T08:39:23.637 回答