带有左侧浮动标签的 Bootstrap 水平表单

Question

我正在尝试在带有左标签的部分内放置一个水平表单。 我似乎无法解决的问题是，由于 tab-left 是通过将<ul> 向左浮动创建的，而.form-group 的分组方式类似于.clearfix，这意味着第一个表单组将同时清除左侧选项卡，导致下一个表单组的位置偏离。

片段：http://www.codeply.com/go/zdjODkN7uu

我想知道是否可以“删除”表单组的 clearfix 或以其他方式正确包含选项卡内容部分中的表单？ 感谢您的帮助。

Answer 1

也许这会起作用或帮助您弄清楚您需要什么。它基本上只是使用列来保存选项卡。

/* left tab styles (was removed from bootstrap 3)
		pulled from http://stackoverflow.com/a/18443236 and http://www.bootply.com/74926 */

.tabs-left .nav-tabs {
  height: 100%;
  border-bottom: 0;
  padding-top: 50px;
}
.tabs-left .nav-tabs li {
  float: none;
}
.tabs-left .nav-tabs li a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}
.tabs-left .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}
.tabs-left .nav-tabs li a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.tabs-left .nav-tabs li a:hover,
.tabs-left .nav-tabs li a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left .nav-tabs .active a,
.tabs-left .nav-tabs .active a:hover,
.tabs-left .nav-tabs .active a:focus {
  border-color: #ddd transparent #ddd #ddd;
  border-right-color: #ffffff;
}
@media (max-width: 360px) {
  .tab-pane {
    margin-left: 35px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<hr/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#paymentPlan" data-toggle="tab">Setup a Payment Plan</a>

          </li>
          <li><a href="#reports" data-toggle="tab">Reports</a>

          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-9">
      <div class="tab-content">
        <div class="tab-pane active" id="paymentPlan">
          <form class="form-horizontal" id="tabForm">
            <div class="form-group">
              <label for="system" class="col-sm-2 control-label" translate>System:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="system" />
              </div>
            </div>
            <div class="form-group">
              <label for="company" class="col-sm-2 control-label" translate>Company:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="company" />
              </div>
            </div>
          </form>
        </div>
        <div class="tab-pane" id="reports">
          <div class="well">Yup</div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr/>