引導對齊製表內容相應

Question

我有以下選項卡，

看到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> 

我怎樣才能讓標籤內容符合正確地進入接壤的div？ 因爲我使用了一些插件，所以我需要以某種方式維護一個微笑結構。

我不知道爲什麼stackoverflow仍然要求我提供額外的細節，因爲執行代碼在自動執行過程中自動執行。

感謝您的幫助！

Answer 1

你可以在你的form-groups上使用關鍵字row，它可以放在邊框中，你可以在bootstrap上看到更多關於網格的內容。追加類行的每一個形式基團的含量是這樣的：

<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>