将文本框与radiobuttonlist listitem的右侧对齐

Question

我试图将.NET WebForms页面略微升级到Bootstrap 3.我需要维护一个在没有Bootstrap的情况下工作正常的功能。我需要一个单选按钮标签右侧的小文本框。比如，选择＆＃34;其他＆＃34;你需要自由形式文本其他意味着什么。

在上面的示例中，我只需要向上移动文本框，而不是像整个表单一样宽。

这是我目前的代码：

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

Answer 1

我不知道您想要如何放置标签，但在您的代码中看起来像是在尝试将标签放在一边，单选按钮加上表单字段在另一边，在单选按钮容器中包含表单字段。只是把它拿出来，它应该工作（在这个例子中，我将标签放在它自己的行，并将表单字段设置为sm-3，因为它不会太大）：

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

您可以使用size属性进一步限制表单字段的宽度，或者将其添加为CSS宽度。

Answer 2

我通过定位文本框解决了问题。感觉脏，但它的工作原理。宁愿让它在列表项的流程中工作。