Asp.net复选框 - 无法在复选框

Question

我有一个带标签的asp复选框，但标签与复选框不对齐：

<div class="row checkbox">
    <label for="phcontent_2$cbStayInTouch"><asp:Label id="LabelStayInTouch" runat="server"></asp:Label></label>
    <asp:CheckBox runat="server" ID="cbStayInTouch"/>
</div>

我尝试使用inline-block来获取相邻的复选框和标签（＆＃34;发送电子邮件＆＃34;），但它没有做任何事情。

我尝试将复选框包装在div中并将inline-block放在div和元素内部，如下所示：

<div style="display: inline-block;">
    <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" style="display: inline-block;">
    <label for="phcontent_1_cbStayInTouch" style="display: inline-block;">Send me emails</label>
</div>

但它们仍然没有对齐：

编辑：它应该是这样的：

Answer 1

Bootstrap具有表单水平和表单组，而不是行。您可以阅读更多here。

此外，您希望在ASP.Net中使用 AssociatedControlID 。

屏幕截图

ASPX

<div class="form-horizontal">
    <div class="form-group">
        <asp:Label ID="LabelStayInTouch" runat="server" Text="Stay in touch"
            AssociatedControlID="cbStayInTouch" CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:CheckBox runat="server" ID="cbStayInTouch"
                Text="Send me emails" CssClass="checkbox" />
        </div>
    </div>
    <div class="form-group">
        <asp:Label ID="FirstNameLabel" runat="server" Text="First Name"
            AssociatedControlID="FirstNameTextBox"
            CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:TextBox ID="FirstNameTextBox" runat="server"
                CssClass="form-control" />
        </div>
    </div>
</div>

渲染输出

<div class="form-horizontal">
    <div class="form-group">
        <label for="MainContent_cbStayInTouch" id="MainContent_LabelStayInTouch" 
            class="col-xs-3 control-label">Stay in touch</label>
        <div class="col-xs-4">
            <span class="checkbox"><input id="MainContent_cbStayInTouch" 
                type="checkbox" name="ctl00$MainContent$cbStayInTouch">
                <label for="MainContent_cbStayInTouch">Send me emails</label></span>
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_FirstNameTextBox" id="MainContent_FirstNameLabel" 
            class="col-xs-3 control-label">First Name</label>
        <div class="col-xs-4">
            <input name="ctl00$MainContent$FirstNameTextBox" type="text" 
                id="MainContent_FirstNameTextBox" class="form-control">
        </div>
    </div>
</div>

Answer 2

您可以尝试此代码

<div>
 <div style="display: inline-block;">
  <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" >
 </div>    
 <div style="display: inline-block;vertical-align: top;">
  <label for="phcontent_1_cbStayInTouch">Send me emails</label>
 </div>
</div>