Twitter Bootstrap이 필드 세트 범례의 렌더링을 변경하는 이유는 무엇입니까?

이 ASP.NET MVC 3 프로젝트에서 저는 방금 트위터 부트 스트랩을 실험하기 시작했습니다. 그러나 나는 <fieldset> 범례의 렌더링을 망칠 것입니다. 전설에 무슨 일이 일어나고 있으며 정상으로 돌아갈 수 있습니까? 즉, 오른쪽 선을 다시 왼쪽 선과 수직으로 정렬하려고합니다. 오른쪽Twitter Bootstrap이 필드 세트 범례의 렌더링을 변경하는 이유는 무엇입니까?

표준 전설 렌더링, 사전 부트 스트랩, 왼쪽으로, 부트 스트랩이 영향을받는 렌더링 :

Normal legend Twitter Bootstrap legend

업데이트 : 깨진 렌더링을 일으키는 것을 발견했습니다 부트 스트랩은 legend의 width 속성을 100 %로 변경하고 border-bottom 속성을 '1px solid'로 변경합니다. 이로 인해 범례 오른쪽의 원래 테두리가 지워지고 그 아래 테두리가 대신 나타납니다. 문제는 이것이 어떻게 작동하기위한 것인지입니다. 어쩌면 MVC의 CSS (Site.css)가 Bootstrap의 CSS를 방해합니까?

출처

2012-07-13 aknuds1

너비 문제 일 수 있습니다. 텍스트의 길이,'범례'또는 패딩의 너비를 변경해보십시오. 그냥 첫 번째 glace 추측 – Eonasdan

당신의 전설에 대한 CSS가 뭐죠? 나는 단지 경계선 아래를 얻는다 : 1px 내? – Jeemusu

부트 스트랩은이 동작을 일으키는'width : 100 %'와'border-bottom : 1px solid' 속성을 추가합니다. 첫 번째 속성은 오른쪽의 원래 줄을 사라지게하고 두 번째 줄은 범례 아래 줄을 표시합니다. 부트 스트랩이 여기에서 무엇을하려고하는지 모릅니다. – aknuds1

부트 스트랩이 마지막이되도록 당신이 당신의 스타일 선언을 전환 할 경우이 문제, 즉 수정해야합니다

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

부트 스트랩 스타일을

fieldset { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    padding: 0; 
    margin-bottom: 27px; 
    font-size: 19.5px; 
    line-height: 36px; 
    color: #333; 
    border: 0; 
    border-bottom: 1px solid #E5E5E5; 
}

기본 MVC있는 style.css 스타일

fieldset { 
    border: 1px solid #DDD; 
    padding: 0 1.4em 1.4em 1.4em; 
    margin: 0 0 1.5em 0; 
} 

legend { 
    font-size: 1.2em; 
    font-weight: bold; 
}

다른 방법으로 주위 대

enter image description here

(마지막 선언 MVC의 기본 스타일)

enter image description here

가 또는 전부 MVC 스타일 시트를 제거하고 부트 스트랩을 사용하여 얻을 : 0

최종 결과는 같은 보일 것이다 필요한 사용자 정의 스타일과 함께.

출처

2012-07-13 18:54:17 MikeM

Twitter Bootstrap이 필드 세트 범례의 렌더링을 변경하는 이유는 무엇입니까?

답변

관련 문제