Bootstrap验证消息显示在错误的位置

Question

我使用Bootstrap创建了一个ASP.NET用户输入表单，其中包含以下HTML片段：

          <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <asp:UpdatePanel ID="updSignIn" runat="server">
                <ContentTemplate>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Set Up Your Member Account
                        </div>
                        <div class="panel-body">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="ddSalutation" class="col-sm-4 control-label">
                                        How Do We Greet You?
                                    </label>
                                    <div class="col-sm-2">
                                        <asp:DropDownList ID="ddSalutation" runat="server" CssClass="form-control" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tbFirstName" class="col-sm-4 control-label">
                                        First Name:
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" runat="server" class="form-control" id="tbFirstName"
                                            required placeholder="Enter your first name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tbMiddleName" class="col-sm-4 control-label">
                                        Middle Name/Initial:
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" runat="server" class="form-control" id="tbMiddleName"
                                            required placeholder="Enter your middle name/initial">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tbLastName" class="col-sm-4 control-label">
                                        Last Name:
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" runat="server" class="form-control" id="tbLastName"
                                            required placeholder="Enter your last name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tbPhone" class="col-sm-4 control-label">
                                        Contact Telephone:
                                    </label>
                                    <div class="col-sm-3">
                                        <input type="tel" title="Telephone Number" pattern="^\d{3}-\d{3}-\d{4}$" 
                                            id="tbPhone" placeholder="Telephone" class="form-control" 
                                            required runat="server" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tbSSN" class="col-sm-4 control-label">
                                        SSN/Tax ID Number:
                                    </label>
                                    <div class="col-sm-3">
                                        <input type="text" pattern="^\d{3}-\d{2}-\d{4}$"
                                            title="Social Security Number" runat="server" class="form-control" id="tbSSN"
                                            required placeholder="SSN/Tax ID">
                                    </div>
                                </div>
                                <div class="spacer">&nbsp;</div>
                                <div class="form-group">
                                    <div class="col-sm-offset-4 col-sm-7" id="buttons">
                                        <asp:Button ID="btnNext" runat="Server"
                                            Text="Next"
                                            CssClass="btn btn-default btn-sm col-sm-4"
                                            OnClick="btnNext_Click"></asp:Button>
                                        <button type="reset" id="btnReset" class="btn btn-default btn-sm col-sm-4">
                                            Reset Form</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="spacer">&nbsp;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="text-center" id="divProcessing" style="display: none;">
                            <img src="images\loading.gif" style="height: 40px; width: 40px;" />&nbsp;Please wait...
                        </div>
                        <div class="row">
                            <div class="alert alert-danger fade col-sm-offset-1 col-sm-10 text-center" id="lblStatus">&nbsp;</div>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

表格很好。问题是，当我单击按钮处理表单时，Bootstrap的验证消息不会与需要用户注意的字段对齐。以下是所发生情况的屏幕截图：

正如您所看到的，需要注意的表单字段是名字字段，但Bootstrap中的工具提示弹出窗口是右下角。我没有任何格式错误的HTML，所以我不明白弹出消息定位的问题。对此有何帮助？谢谢！