ブートストラップフォームの整列

Question

これで、フォームの整列に少し問題があります。私は2つの異なるファイル、正しいアラインメントを与えたファイルとしなかったファイル（コード・シグネチャのビュー）で試しました。助けてください。

そのスクリーンショットと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' : ''; ?>"> 
 
\t \t \t    
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis maximus ex.</p> 
 
      </div> 
 
     </div> 
 

 

 

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

Alignment messed

とテストファイルからの抜粋であるそのスクリーンショットは以下のとおりです

<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">にクラス '列' を追加してみてください。ブートストラップからIIRCを使用すると、colクラスは行コンテナでうまく動作します。