Question

我正在使用bootstrap选项卡，我想将此选项卡与引导网格系统分开，但由于float:left;，标签背景未显示。

这是我的代码;

<div role="tabpanel" class="tab-pane fade in active" id="home">
        <div class="col-lg-6">
          <h3>Categories</h3>
        </div>
        <div class="col-lg-6" >
          <h3>Datasets</h3>
        </div>
    </div>

如果我没有添加此col-lg-6课程，那么它正常运行，感谢您的建议

固定代码; （刚在网格类之前添加了行类）

<div role="tabpanel" class="tab-pane fade in active" id="home">
      <div class="row">
        <div class="col-lg-6">
          <h3>Categories</h3>
        </div>
        <div class="col-lg-6" >
          <h3>Datasets</h3>
        </div>
      </div>
    </div>

Answer 1

我猜测实际问题是什么，但你几乎总是想要在行元素中包装列。

<div class="row">
    <div class="col-xs-6">
         <h3>Categories</h3>
    </div>
    <div class="col-xs-6">
         <h3>Datasets</h3>
    </div>
</div>

<强> Demo

row元素强制tab元素清除浮动列。如果在选项卡窗格外部已有行元素，则将其移到内部或在外部添加全宽列，在内部添加一行。

小提琴更新了标签颜色。

使用选项卡中的列时，不显示选项卡背景

1 个答案: