ブートストラップは、それに応じて

Question

タブコンテンツを揃え、私はタブを次している、

はどのように接してdiv要素の中に正しくタブコンテンツの適合を行うことができますか？codepen

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-4"> 


      <div class="halter"> 
       <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
        </div> 
       </div> 



       <div> 

        <!-- Nav tabs --> 
        <ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li> 
         <li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li> 
         <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li> 
         <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></li> 
        </ul> 

        <!-- Tab panes --> 
        <div class="tab-content"> 
         <div role="tabpanel" class="tab-pane active" id="home"> 
          <div class="form-group"> 
           <label for="inputPassword3" class="col-sm-2 control-label">Assword</label> 
           <div class="col-sm-10"> 
            <input type="password" class="form-control" placeholder="Password"> 
           </div> 
          </div> 
         </div> 

         <div role="tabpanel" class="tab-pane" id="profile"> 
          <div class="form-group"> 
           <label for="inputPassword3" class="col-sm-2 control-label">Bassword</label> 
           <div class="col-sm-10"> 
            <input type="password" class="form-control" placeholder="Password"> 
           </div> 
          </div> 
         </div> 

         <div role="tabpanel" class="tab-pane" id="messages"> 
          <div class="form-group"> 
           <label for="inputPassword3" class="col-sm-2 control-label">Cassword</label> 
           <div class="col-sm-10"> 
            <input type="password" class="form-control" placeholder="Password"> 
           </div></div> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="col-xs-8"> 
      <form class="form-horizontal"> 
       <div id="l2"> 

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

を見ますか 私はプラグインを使用しているので、何とかスミラ構造を維持する必要があります。

fidle内の実行コードが自己解読されているので、なぜstackoverflowがまだ私にさらなる詳細を与えるのか分からない。

ご協力いただきありがとうございます。

Answer 1

form-groupsでキーワードrowを使用すると境界に収まるので、ブートストラップのグリッドについて詳しく読むことができます。このようなコンテンツのすべてのフォームグループへのクラスの行を追加します。

<div class="row form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Assword</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" placeholder="Password"> 
    </div> 
</div> 

例：

.nav-tabs > li { 
 
    float:none; 
 
    display:inline-block; 
 
    zoom:1; 
 
} 
 

 
.nav-tabs { 
 
    text-align:center; 
 
} 
 
.nav-tabs { 
 
    border-bottom: none; 
 
} 
 

 
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {border-bottom:5px solid green;} 
 

 
.halter{margin:5px;padding:5px;border:1px solid gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 

 

 
      <div class="halter"> 
 
       <div class="form-group"> 
 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
 
        <div class="col-sm-10"> 
 
         <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
 
        </div> 
 
       </div> 
 

 

 

 
       <div> 
 

 
        <!-- Nav tabs --> 
 
        <ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li> 
 
         <li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li> 
 
         <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li> 
 
         <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></li> 
 
        </ul> 
 

 
        <!-- Tab panes --> 
 
        <div class="tab-content"> 
 
         <div role="tabpanel" class="tab-pane active" id="home"> 
 
          <div class="form-group row"> 
 
           <label for="inputPassword3" class="col-sm-2 control-label">Assword</label> 
 
           <div class="col-sm-10"> 
 
            <input type="password" class="form-control" placeholder="Password"> 
 
           </div> 
 
          </div> 
 
         </div> 
 

 
         <div role="tabpanel" class="tab-pane" id="profile"> 
 
          <div class="form-group row"> 
 
           <label for="inputPassword3" class="col-sm-2 control-label">Bassword</label> 
 
           <div class="col-sm-10"> 
 
            <input type="password" class="form-control" placeholder="Password"> 
 
           </div> 
 
          </div> 
 
         </div> 
 

 
         <div role="tabpanel" class="tab-pane" id="messages"> 
 
          <div class="form-group row"> 
 
           <label for="inputPassword3" class="col-sm-2 control-label">Cassword</label> 
 
           <div class="col-sm-10"> 
 
            <input type="password" class="form-control" placeholder="Password"> 
 
           </div></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <form class="form-horizontal"> 
 
       <div id="l2"> 
 

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