将引导网格应用于 RadioButtonList 的 ListItem答案

【问题标题】：apply bootstrap grid to RadioButtonList's ListItem将引导网格应用于 RadioButtonList 的 ListItem
【发布时间】：2023-03-11 17:00:02
【问题描述】：

我想将引导网格应用到 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 css asp.net twitter-bootstrap bootstrap-grid

【解决方案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 应该有类似

的类

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

【讨论】：

添加你的css后，我的整个页面设计都受到了干扰。
如果您要开始构建 display:flex 内容，您必须将 flex 添加到所有 div。
我正在使用引导程序，它改变了我的所有结构。
codepen.io/wacKYjoker/pen/wpoGYz 这是纯 css 风格，使用 bootstrap 必须在每个 class="box" 上使用 col-md-2，如 class="col-md-2 box"
我想使用引导构建类 col-md-2 到非自定义列表项。

【解决方案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>

【讨论】：