Выровнять текстовое поле справа от radioobuttonlist listitem

Question

Я пытаюсь сделать небольшое обновление страницы .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> 

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

Я решил, разместив текстовое поле. Чувствует себя грязным, но он работает. Скорее бы он работал в потоке элементов списка.