输入表单对齐方式错误

Question

我是CSS样式的初学者。谁能告诉我为什么姓氏输入框的对齐方式不同（而不是与“姓氏”部分对齐），以及为什么工资单编号输入框（虽然更接近）仍在文本框和“工资单编号”面板之间留有空隙？两个输入框的HTML完全相同吗？

根据编辑建议的代码：

                <div class="round-div" style="border:2px solid #428bca;">
                    <div class="row">
                        <div class="col-sm-6 col-md-4 col-md-offset-4">
                            <div class="admin-wall">
                                <div class="container text-center">
                                        <div class="row">
                                            <img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/australianpharmaceuticalindustrieslogoh.png" />
                                        </div>
                                    <span class="border border-info">
                                            <h1 style="color:#428bca;font-weight:bold">We Love Your Work</h1>
                                            <h4>"Celebrating our people for demonstrating safety, health & wellbeing and our values"</h4>
                                            <div class="panel-info">
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="input-group">
                                                          <span class="input-group-addon" id="inputSurname">Surname</span>
                                                          <input type="text" class="form-control" placeholder="Smith" aria-describedby="inputSurname">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="input-group">
                                                          <span class="input-group-addon" id="inputPayrollId">Payroll #</span>
                                                          <input type="password" class="form-control" placeholder="53677" aria-describedby="inputPayrollId">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="container text-center">
                                                <div class="row">
                                                    <img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/wlyw_footer.png" />
                                                </div>
                                                <div class="row">
                                                    <h6><small><asp:Label ID="Lblversion" runat="server"></asp:Label></small></h6>
                                                </div>
                                            </div>
                                    </span>
                                </div>
                                </div>
                            </div>
                       </div>
                    </div>

Answer 1

使用此

<div class="container">
   <div class="input-group col-md-12">
   // Do Your First Input Group
   </div>
   <div class="input-group col-md-12">
   // Do Your Second Input Group
   </div>
</div>