在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没有a 的类container,并且由于某些奇怪的原因导致在较小的屏幕上产生负余量.这是一个现场演示示例:

Bootply

希望有所帮助!