Align textbox to right of radiobuttonlist listitem

问题

I'm trying to do a slight upgrade of a .NET WebForms page to Bootstrap 3. I need to maintain a feature that worked fine without Bootstrap. I need a small textbox to the right of a radio button label. Like, when selecting "Other" you need to free form text what other means.

In the sample above, I just need the textbox to move up and not be as wide as the entire form.

Here is my current code:

<div class="form-group">
    <asp:Label ID="Ethnicity_Label" runat="server" Text="Ethnicity" CssClass="col-xs-12 col-sm-3 control-label"></asp:Label>
    <div class="col-xs-12 col-xs-push-1 col-sm-9 col-sm-push-0 radio radiobuttonlist">
        <asp:RadioButtonList ID="Ethnicity" runat="server" ValidationGroup="applicationForm" RepeatLayout="Flow">
            <asp:ListItem Text="Multi-Racial" Value="Multi-Racial" />
            <asp:ListItem Text="Other Ethnicity" Value="Other Ethnicity" />
        </asp:RadioButtonList><span class="col-xs-4 col-xs-push-3"><asp:TextBox ID="OtherEthnicity" runat="server" MaxLength="250" ValidationGroup="applicationForm" CssClass="form-control" /></span>
    </div>
</div>

回答1:

I don't know how exactly you want to place your label, but it looks like in your code you're trying to place the label on one side, and the radio button plus form field all on the other side, and have include the form field inside the radio button container. Just take it out of there, and it should work (in this example, I put the label to its own row, and set the form field to sm-3 for it not to be too big):

<div class="form-group">
    <asp:Label ID="Ethnicity_Label" runat="server" Text="Ethnicity" CssClass="col-xs-12 col-sm-12 control-label"></asp:Label>
    <div class="col-xs-12 col-sm-3 radio radiobuttonlist">
        <asp:RadioButtonList ID="Ethnicity" runat="server" ValidationGroup="applicationForm" RepeatLayout="Flow">
            <asp:ListItem Text="Multi-Racial" Value="Multi-Racial" />
            <asp:ListItem Text="Other Ethnicity" Value="Other Ethnicity" />
        </asp:RadioButtonList>
    </div>
    <div class="col-xs-12 col-sm-3">
        <asp:TextBox ID="OtherEthnicity" runat="server" MaxLength="250" ValidationGroup="applicationForm" CssClass="form-control" />
    </div>
</div>

You can further limit the width of the form field by using the size attribute or add it a CSS width.

回答2:

I solved by positioning the textbox. Feels dirty but it works. Would have rather made it work within the flow of the list items.

来源：https://stackoverflow.com/questions/42236582/align-textbox-to-right-of-radiobuttonlist-listitem