Question

当我在选项卡窗格中添加一行时，该行的内容似乎有一个负边距，越过选项卡窗格边框的边框。

如何在标签窗格中添加行（和列）？

Beneath是我的HTML：

＆＃13;

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

＆＃13;

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

希望有所帮助！

在tabpane里面排

1 个答案: