Bootstrap 表单对齐

Question

好吧，我的表单对齐有点问题。我在 2 个不同的文件上进行了尝试，一个给出了正确的对齐方式，一个没有（这是 codeigniter 的视图）。请帮忙。在此先感谢:)

CI 视图中的文件及其屏幕截图如下

<?php $tab = (isset($_GET['tab'])) ? $_GET['tab'] : 'add-user'; ?>
<div class="container">
   <div class="row" style="margin-top:50px;">
      <div class="col-lg-8 col-lg-offset-3">
                   
                   <ul style="margin-bottom: 30px;" class="nav nav-pills">
                          
                          <li class="<?php echo ($tab == 'add-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=add-user'); ?>"><i class="fa fa-user"></i>&nbsp;<span>Add User</span></a></li>
                   
                          <li class="<?php echo ($tab == 'update-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">Update User</a></li>
                   
                          <li class="<?php echo ($tab == 'delete-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">Delete User</a></li>
                   
                          <li class="<?php echo ($tab == 'view-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">View Users</a></li>
                   
                          <li class="<?php echo ($tab == 'generate-account') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=generate-account'); ?>">Generate User Account</a></li>
                   </ul>
                  
                  <div class="tab-content">
                      <div id="add-user" class="tab-pane <?php echo ($tab == 'add-user') ? 'active fade in' : ''; ?>">
                            <?php $this->load->library('form_validation');
                            echo validation_errors(); ?>
                            <?php echo form_open('crud_user/add_form');?>
                         
                            <fieldset>
                              <legend>ADD</legend>
                                  <form class="form-horizontal" ame="add_user_form" form="add_form">
                                  <fieldset>

                                  <legend>Add User</legend>

                                 <div class="form-group">
                                      <label class="col-md-4 control-label" for="textinput">Employee ID</label>  
                                      <div class="col-md-4">
                                            <input type="text" name="emp_id" id="emp_id" placeholder="Employee ID" class="form-control input-md"> 
                                      </div>
                                  </div>


                                <div class="form-group">
                                      <label class="col-md-4 control-label" for="textinput">First Name</label>  
                                <div class="col-md-4">
                                          <input type="text" name="firstname" id="firstname" placeholder="First Name" class="form-control input-md">
                                </div>
                                </div>


                                <div class="form-group">
                                      <label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
                                      <div class="col-md-4">
                                          <select id="selectbasic" name="selectbasic" class="form-control">
                                              <option value="1">Option one</option>
                                              <option value="2">Option two</option>
                                            </select>
                                      </div>
                                </div>

                                </fieldset>
                             </form>
                        </div>
                   </div>
     

                <div class="tab-content">
                    <div id="update-user" class="tab-pane <?php echo ($tab == 'update-user') ? 'active fade in' : ''; ?>">
                     
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis maximus ex.</p>
                    
                    </div>
               </div>



              <div class="tab-content">
                 <div id="generate-account" class="tab-pane <?php echo ($tab == 'generate-account') ? 'active fade in' : ''; ?>">
			             
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis maximus ex.</p>
             </div>
         </div>



</div>
</div>
</div>

Alignment messed

下面是来自测试文件的 sn-p 截图

<div class="container">
   <div class="row" style="margin-top:50px;">
      <div class="col-lg-8 col-lg-offset-3">
                   <ul style="margin-bottom: 30px;" class="nav nav-pills">
                   <li class="active"><a href="#add-user"><i class="fa fa-user">          </i>&nbsp;<span>Add User</span></a></li>
                  
                   </ul>
                    <div class="tab-content">
                        <div id="add-user" class="tab-pane active fade in">
                      
                          <form class="form-horizontal">
                          <fieldset>

                             <legend>Add User</legend>

                             <div class="form-group">
                                  <label class="col-md-4 control-label" for="textinput">Employee ID</label>  
                                  <div class="col-md-4">
                                        <input type="text" name="emp_id" id="emp_id" placeholder="Employee ID" class="form-control input-md"> 
                                  </div>
                              </div>


                            <div class="form-group">
                                  <label class="col-md-4 control-label" for="textinput">First Name</label>  
                            <div class="col-md-4">
                                      <input type="text" name="firstname" id="firstname" placeholder="First Name" class="form-control input-md">
                            </div>
                            </div>


                            <div class="form-group">
                                  <label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
                                  <div class="col-md-4">
                                      <select id="selectbasic" name="selectbasic" class="form-control">
                                          <option value="1">Option one</option>
                                          <option value="2">Option two</option>
                                        </select>
                                  </div>
                            </div>

       </fieldset>
     </form>
   </div>
 </div>
</div>

Bootstrap form with proper alignment

Answer 1

尝试将“行”类添加到每个 <div class="form-group"> 。来自引导 col 类的 IIRC 在行容器中工作得更好。