html - 将引导网格应用于RadioButtonList的ListItem

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

更新：

我正在寻找的结果：

html - 将引导网格应用于RadioButtonList的ListItem-LMLPHP

最佳答案

使用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应该有这样的类

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

关于html - 将引导网格应用于RadioButtonList的ListItem，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47954476/