부트 스트랩 탐색 탐색 탭 클래스는

Question

내가 속성을 사용하는 요소 옆에 배치 할 때 .nav 및 .nav-tab 클래스를 사용하여 문제가있을 것 같다 때 다음 부동 소수점 왼쪽으로 사용하는 요소에 제대로 표시되지 float:left (가) JSFiddle 것 같습니다 참조 나에게 그것은 .nav::after에 clearfix와 함께하지만, 내가 CSS를 수정하면 clear:both을 제거 할 때 nav-tab이 엉망이된다.

기본적으로 내가하려고하는 것은 두 개의 정적 열을 만든 다음 나머지 탭을 채우는 세 번째 동적 열입니다.이 동적 열은 탭 콘텐츠를 포함하는 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

작동중인 답변이있는 JSFiddle이 업데이트되었습니다.

clear:both이 .nav 클래스에서 사용되는 .clearfix 믹스 인이기 때문에 표시되지 않는 이유가 있습니다. 이렇게하면 왼쪽 또는 오른쪽으로 떠있는 다른 요소 아래의 모든 요소를 ​​가져옵니다.

.clearfix이 구현 된 after을 수정하십시오. 추가

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

: 당신은 내가 올바르게 표시하도록 지금 이후의 높이를 지정해야했을 것을 알 것이다 JSFiddle의 경우 위에 나는 다음과 같은 CSS를 추가했다. 이 솔루션이 쓰러지는 곳에서는 요소가 어디서나 사용됩니다. clearfix 높이를 수동으로 처리해야합니다.

Answer 2

확인은 확인해야 기본적으로 편집 대답 입니다의 폭 div는 float를 사용하는 경우 제대로 정의됩니다.

.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입니다.