RadiobuttonList 的 Bootstrap CSS

Bootstrap CSS for RadiobuttonList

提问by King_Fisher

Radion button :

单选按钮：

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

I have applied the Bootstrap css for:

我已将 Bootstrap css 应用于：

• text box,
• dropdown list,
• textarea,
• buton, etc.

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

Everything looks fine, except for radiobutton list, which looks terrible:

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

How to solve this ?

如何解决这个问题？

回答by abiNerd

I could not use a <label>and <input type="radio">

我不能使用<label>和<input type="radio">

So this is what I used:

所以这就是我使用的：

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

And it came out like this:

结果是这样的：

回答by Abhilash Thomas

There are plenty of option you can choose, but i feel the best is in my experience is below.

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

1. First set style in the top of your form as shown below

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

2. Second you should apply the clss to the ASP.NET RadioButtonList control

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

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

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

回答by 4dgaurav

Demo

演示

Add 'radio inline' class to the 'label'

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

html

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>