单选按钮列表的引导 CSS

Posted 2023-03-06

【中文标题】单选按钮列表的引导 CSS

【英文标题】：Bootstrap CSS for RadiobuttonList

【发布时间】：2015-02-14 11:36:21

【问题描述】：

单选按钮：

   <div class="control-group">
    <label class="control-label">Mode</label>
    <div class="controls">
        <asp:radiobuttonlist id="RadioButtonList1" cssclass="radio" autopostback="true" title="Please Select Mode of Payment"
          repeatdirection="Horizontal"
          onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
            <asp:listitem>Cash</asp:listitem>
            <asp:listitem>Cheque</asp:listitem>
            <asp:listitem>Demand Draft</asp:listitem>
            <asp:listitem>Net Banking</asp:listitem>
        </asp:radiobuttonlist>
    </div>
   </div>

我已将 Bootstrap css 应用于：

文本框， 下拉列表， 文本区域， 按钮等

一切看起来都很好，除了单选按钮列表，看起来很糟糕：

如何解决？

【问题讨论】：

你为 radiobuttonlist 分配了 100% 吗？？

@SureshPonnukalai 你是什么意思？

【参考方案1】：

您可以选择很多选项，但我觉得最好的是我的经验如下。

首先在表单顶部设置样式，如下所示

<style>
    .radiostyle 
      height: auto;
    

    .radiostyle label 
        margin-left: 3px !important;
        margin-right: 10px !important;
    
</style>

其次，您应该将 clss 应用于 ASP.NET RadioButtonList 控件

【参考方案2】：

我无法使用<label> 和<input type="radio">

所以这就是我使用的：

<asp:RadioButtonList ID="popiRadios" RepeatLayout="Flow" RepeatDirection="Horizontal" runat="server">
                        <asp:ListItem class="radio-inline" Value="1" Text="Cash" Selected="True"></asp:ListItem>
                        <asp:ListItem class="radio-inline" Value="0" Text="Cheque"></asp:ListItem>
                    </asp:RadioButtonList>

结果是这样的：

【讨论】：

感谢您的提醒，尽管 Visual Studio 的“智能感知”对此感到不安，但可以在 对象中插入普通的 html 属性，并且它们可以工作。

【参考方案3】：

Demo

将“radio inline”类添加到“label”

html

<form>
    <div class="form-inline">
        <div class="controls-row">
            <label class="control-label">Mode</label>
            <label class="radio inline">
                <input type="radio" value="1" />First</label>
            <label class="radio inline">
                <input type="radio" value="2" />Second</label>
            <label class="radio inline">
                <input type="radio" value="1" />Third</label>
            <label class="radio inline">
                <input type="radio" value="2" />Fourth</label>
            <label class="radio inline">
                <input type="radio" value="1" />Fifth</label>
            <label class="radio inline">
                <input type="radio" value="2" />Sixth</label>
        </div>
    </div>
</form>

【讨论】：

但我的单选按钮列表中没有标签控件

对不起，我说我的 RadiobuttonList 没有标签属性，我只有 Cash

这可以帮助你jsfiddle.net/4dgaurav/GaDbZ/412，输入元素默认是内联的。

抱歉，我无法在 Web 表单中使用 Html 输入，因为我使用了母版页