将 bootstrap 网格应用于 RadioButtonList 的 ListItem

Question

我想将 bootstrap 网格应用于 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>

已更新：

我正在寻找的结果：

Answer 1

使用 CSS 显示它们 flex:

#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 应该有 class 就像

<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>

并且 bootstrap 版本将

#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>

Answer 2

我这样使用 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>

将 bootstrap 网格应用于 RadioButtonList 的 ListItem

apply bootstrap grid to RadioButtonList's ListItem

html

css

asp.net

twitter-bootstrap

bootstrap-grid

已更新：