html - 输入表单对齐不正确

Question

我是 CSS 样式的初学者。谁能告诉我为什么姓氏输入框的对齐方式不同(不是左对齐到“姓氏”部分)以及为什么工资单 ID 输入框 - 虽然更接近 - 文本框和“工资单#”面板之间仍然有间隙？两个输入框的 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>