부트 스트랩 탐색 탭 위에 콘텐츠를 표시 하시겠습니까?

-1

부트 스트랩에 정의 된대로 페이지에 탐색 탭 마크 업을 구현하고 싶습니다. 그러나 탭 아래에 전통적으로 배치 된 내용과 대조적으로 각 탭을 클릭 할 때 표시되는 내용을 탭 위에 배치하려고합니다.부트 스트랩 탐색 탭 위에 콘텐츠를 표시 하시겠습니까?

간단히 말해 "탭"과 "탭 내용"의 위치를 전환하고 싶습니다.

누군가 도와 드릴 수 있습니까?

출처

2016-07-01 NewBee

당신은 탭을 통해 탭으로 컨텐츠를 배치하여 탭과 탭 내용의 위치를 전환 할 수 있습니다

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div> 

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul>

UPDATE 탭이 거꾸로

가 얻을 보여주고 받기 탭은 다음

.nav-tabs { 
    border-bottom: transparent; 
    border-top: 1px solid #dddddd; 
} 
.nav-tabs > li { 
    float: left; 
    margin-bottom: -1px; 
} 
.nav-tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    border-radius: 0 0 4px 4px; 
} 
.nav-tabs > li > a:hover { 
    border-color: #eeeeee #eeeeee #dddddd; 
} 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
    color: #555555; 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
    border-top-color: transparent; 
    cursor: default; 
    margin:-1px; 
}

으로 부트 스트랩의 기본 CSS를 덮어 쓸 수 거꾸로 업데이트 Bootply되어 보여 http://www.bootply.com/K8HhVqoz08

희망이 있습니다.

출처

2016-07-01 04:13:32 StaticBeagle

우선, 답변 해 주셔서 감사합니다. 확실히 그것은 내용을 확실히 바꿉니다. 하지만 활성 탭의 CSS를 관찰하면 너무 멋지지 않습니다. 그 내용은 위와 그 스타일은 "약간의 상상의 내용"을 포용하고 있기 때문입니다. 동의하셨습니까? – NewBee

@NewBee 당신이하려는 일은 다소 차이가 있습니까? – StaticBeagle

@ RedHat, 아마 직업의 30 % 일 것입니다. 위의 설명에 따라 CSS를 수정하고 싶습니다. – NewBee

부트 스트랩 탐색 탭 위에 콘텐츠를 표시 하시겠습니까?

답변

관련 문제