RadiobuttonList的Bootstrap CSS

Question

Radion按钮:

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

• 文本框,
• 下拉列表,
• textarea的,
• 丁等

一切看起来很好,除了radiobutton列表,看起来很可怕:

怎么解决这个？

Answer 1

我无法使用<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>

它出来是这样的:

Answer 2

演示

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>