트위터 부트 스트랩을 삽입 한 후 필드 세트 및 범례 동작 재설정

Question

트위터 부트 스트랩과 혼란이 있습니다. Fieldset 안에 전설 태그가 있습니다.

이

<form> 
    <fieldset> 
     <legend>Test legend</legend> 
     Some text .. 
    </fieldset> 
</form> 

그것은 매우 간단한 코드이며 여기에서 볼 수 있습니다 결과 : 부트 스트랩 후 http://jsfiddle.net/zono/ApzWW/

내가이 DOM 요소의 매우 다른 견해를 내장 이 내 코드입니다. 결과는 여기에서 볼 수 있습니다 : http://jsfiddle.net/zono/ApzWW/1/

필드 집합 및 범례 요소 동작을 어떻게 재설정 할 수 있습니까?

모든 아이디어와 권장 사항에 대해 매우 감사하게 생각합니다.

감사합니다.

Answer 1

당신은 정말 여기

legend { 
    display: block; 
    width: auto; 
    padding: 0 5px; 
    margin-bottom: 0; 
    font-size: inherit; 
    line-height: inherit; 
    border: auto; 
    border-bottom: none; 
} 

fieldset { 
    border: 2px groove threedface; 
    padding: 5px; 
} 

은 바이올린의 ... 트릭을 할해야 아래처럼 자신 만의 스타일 시트 뭔가에 부트 스트랩 스타일을 덮어 쓸 필요가

:

http://jsfiddle.net/ApzWW/2/

Answer 2

당신에게 이미 스타일이 임베드되어 있기 때문에 부트 스트랩에서 패널을 대안으로 사용할 수도 있습니다. 여기에 예를 (@Billy 대부분의 대답에서 채택)

CSS를하다 왼쪽 정렬 :

legend 
{ 
    width: auto; 
    padding: 0 5px; 
    margin-bottom: 0; 
    font-size: inherit; 
    line-height: inherit; 
    border-bottom: none; 
    text-align: left; 
} 

HTML :

<fieldset class="panel panel-default col-md-5"> 
    <legend>Sort By/Filter</legend> 
    Inside the fieldset 
</fieldset> 

출력 :

http://cdpn.io/pJuDB