Tabpane內部的行

Question

當我在選項卡窗格中添加一行時，該行的內容似乎具有跨越選項卡窗格邊框的邊界的負邊距。

如何在選項卡窗格中添加行（和列）？

下面的是我的HTML：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<h3>Profil/Virksomhedsdata</h3> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <ul class="nav nav-tabs" id="myTab"> 
 
    <li role="presentation" class="active"><a href="#profil" data-toggle="tab">Profil</a> 
 
    </li> 
 
    <li role="presentation"><a href="#autoristation" data-toggle="tab">Autoristationsområder</a> 
 
    </li> 
 
    <li role="presentation"><a href="#abonnement" data-toggle="tab">Abonnement</a> 
 
    </li> 
 
    </ul> 
 
    <div id="myTabContent" class="tab-content" style="padding-left:5px;padding-top:5px;"> 
 
    <div class="tab-pane fade in active" id="profil"> 
 
     <form role="form" class="form-horizontal"> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-1" for="email">Email:</label> 
 
      <div class="col-sm-10"> 
 
       <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="pwd" class="control-label col-sm-1">Password:</label> 
 
      <div class="col-sm-10"> 
 
       <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

你缺少container-fluid類裏面你標籤導航：

<h3>Profil/Virksomhedsdata</h3> 
<nav class="navbar navbar-default" role="navigation"> 
    <ul class="nav nav-tabs" id="myTab"> 
    <li role="presentation" class="active"><a href="#profil" data-toggle="tab">Profil</a></li> 
    <li role="presentation"><a href="#autoristation" data-toggle="tab">Autoristationsområder</a>  </li> 
    <li role="presentation"><a href="#abonnement" data-toggle="tab">Abonnement</a></li> 
    </ul> 
    <div id="myTabContent" class="tab-content" style="padding-left:5px;padding-top:5px;"> 
    <div class="tab-pane fade in active" id="profil"> 
     <div class="container-fluid"> <!-- Notice Here --> 
     <form role="form" class="form-horizontal"> 
      <div class="row">  
      <div class="form-group"> 
       <label class="control-label col-sm-1" for="email">Email:</label> 
       <div class="col-sm-10"> 
       <input class="form-control" id="email" placeholder="Enter email" type="email"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="pwd" class="control-label col-sm-1">Password:</label> 
       <div class="col-sm-10"> 
       <input class="form-control" id="pwd" placeholder="Enter password" type="password"> 
       </div> 
      </div>  
      </div> 
     </form> 
     </div> <!-- End Here --> 
    </div>  
    </div> 
</nav> 

此問題使用類form-horizontal沒有出現一個container，並由於一些奇怪的原因導致負利差更小的屏幕。下面是一個例子現場演示：

Bootply

希望幫助！