ブートストラップ - フォーム - 水平アライメント

Question

私はブートストラップフォーム - 水平に問題があります。問題は、2つの "フォームグループcol-sm-6"グループを持つ水平フォームがあることです。

2つのグループの後に空白があるように見えます（青い矢印を参照してください）。

2つのフォームグループがスペースを埋めるように、そのスペースを削除する必要があります。

私が使用するコードは次のとおりです。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<section class="animated fadeInUp"> 
 
    <div class="panel panel-default col-md-12"> 
 
     <div class="panel-heading"> <b class="text-capitalize">CIF Profile</b> 
 
      <div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="form-horizontal col-sm-12" style="background-color:red;"> 
 
       <div class="form-group col-sm-6" style="background-color:blue;"> 
 
        <div class="col-sm-6"> 
 
         <label class="control-label">Customer Id</label> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group col-sm-6" style="background-color:white;"> 
 
        <div class="col-sm-6"> 
 
         <label class="control-label">Mnemonic</label> 
 
        </div> 
 
        <div class="col-md-6"> 
 
         <input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 1

ブートストラップだけで、このCSSを追加、および削除フォーム・グループ、デフォルトでパディング15ピクセルを持ってい

.form-horizontal.col-sm-12 { 
 
    padding-left: 0px !important; 
 
    padding-right: 0px !important; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<section class="animated fadeInUp"> 
 
    <div class="panel panel-default col-md-12"> 
 
     <div class="panel-heading"> <b class="text-capitalize">CIF Profile</b> 
 
      <div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="form-horizontal col-sm-12" style="background-color:red;"> 
 
       <div class="col-sm-6" style="background-color:blue;"> 
 
        <div class="col-sm-6"> 
 
         <label class="control-label">Customer Id</label> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly"> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm-6" style="background-color:white;"> 
 
        <div class="col-sm-6"> 
 
         <label class="control-label">Mnemonic</label> 
 
        </div> 
 
        <div class="col-md-6"> 
 
         <input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10"> 
 
        </div> 
 
       </div> 
 
       <div>I see the red</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>