将文本框对齐到单选按钮列表列表项的右侧答案

【问题标题】：Align textbox to right of radiobuttonlist listitem将文本框对齐到单选按钮列表列表项的右侧
【发布时间】：2017-02-14 21:29:29
【问题描述】：

我正在尝试将 .NET WebForms 页面稍微升级到 Bootstrap 3。我需要维护一个在没有 Bootstrap 的情况下也能正常工作的功能。我需要一个单选按钮标签右侧的小文本框。喜欢，在选择“其他”时，您需要免费表单文本其他方式。

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

这是我当前的代码：

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

【问题讨论】：

标签： asp.net .net twitter-bootstrap twitter-bootstrap-3 webforms

【解决方案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 宽度。

【讨论】：

【解决方案2】：

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

【讨论】：