Question

当我使用.nav和.nav-tab类放置在使用属性float:left的元素旁边时，我似乎遇到了问题，请参阅JSFiddle 在.nav::after中，我认为它与clearfix相关，但当我修改css以删除clear:both时，导航标签会全部搞砸。

基本上我要做的是创建两个静态列，然后创建第三个动态列，填充页面的其余部分，看起来很好，直到我开始使用包含tab-content的div所在的选项卡第一列和第二列，而不是在它们所指的标签下面的右侧。

这里是html和css：

HTML：

<div class="col1">
    <section class="s1">
        Section 1
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</section>
<section class="s2">
    Section 2 
    <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
</section>
</div>
<section class="s3">
    Section 3    
    <ul class="nav nav-tabs">
         <li><a href="#a" data-toggle="tab">a</a></li>
         <li><a href="#b" data-toggle="tab">b</a></li>
         <li><a href="#c" data-toggle="tab">c</a></li>
         <li><a href="#d" data-toggle="tab">d</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="a">A</div>
        <div class="tab-pane" id="b">B</div>
        <div class="tab-pane" id="c">C</div>
        <div class="tab-pane" id="d">D</div>
    </div>
</section>

的CSS：

.s1{
    float:left;
    width: 60px;
    background-color: grey;
}
.s2{
    float:left;
    width: 60px;
    background-color: pink;
}
.s3{
    background-color: yellow;
    width: 100%;
}

.s3 > .tab-content{
        background-color: orange;
}

Answer 1

好的，这是编辑过的答案基本上，如果使用float，则需要确保正确定义div的宽度;

.col1{
    width:100%;
}
.s1{
    float:left;
    width: 10%;
    background-color: grey;
}
.s2{
    float:left;
    width: 10%;
    background-color: pink;
}
.s3{

background-color: yellow;
float:left;
width:80%;    

}

这是更新的jsfiddle！

Answer 2

这是一个更新的JSFiddle，其中包含有效的答案。

它没有正确显示的原因是因为clear:both位于.clearfix类中使用的.nav mixin中。这会将任何元素拉到其他向左或向右浮动的元素下面。

对此的修复是修改已after已实施的.clearfix。在上面的JSFiddle的情况下，我添加了以下css：

.nav::after{
   clear:none;
   height:41px;
}

附加： 您会注意到我必须指定现在的高度，以便正确显示。此解决方案失败的地方是，现在元素使用clearfix的任何地方都需要手动处理高度。

在使用float left的元素旁边时，Bootstrap nav nav-tab类无法正确显示

2 个答案: