將文本框對齊到radiobuttonlist listitem右邊

我正在嘗試將.NET WebForms頁面稍微升級到Bootstrap 3.我需要維護一個沒有Bootstrap的情況下工作正常的功能。我需要一個單選按鈕標籤右側的小文本框。比如，當選擇「其他」時，您需要以其他方式釋放表單文本。將文本框對齊到radiobuttonlist listitem右邊

在樣品上方，我只需要文本框向上移動，而不是一樣寬的整個形式。

這裏是我當前的代碼：

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

來源

2017-02-14 Connie DeCinko

我不知道你想究竟是如何把你的標籤，但它看起來像在你的代碼你想將標籤貼在一邊，和單選按鈕加表單字段全部在另一側，並在單選按鈕容器內包含表單字段。只要看看它的存在，它應該工作（在這個例子中，我把標籤自身的行，表單字段設置爲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寬度。

來源

2017-02-14 22:06:35 webeno

我通過定位文本框來解決。感覺骯髒，但它的作品。寧願讓它在列表項目的流程中工作。

來源

2017-02-16 14:48:17

將文本框對齊到radiobuttonlist listitem右邊

回答

相關問題