2013-02-23 4 views
0

트위터 부트 스트랩을 사용하여 내 웹 사이트에 "문제"가 발생했습니다. 기본 컨테이너에 기본 .container 부트 스트랩 클래스를 사용하고 사용자 정의 CSS 파일에 특정 너비를 지정했습니다. 그러나 bootstrap-responsive.css 파일을 HTML 문서에 포함 시키면 컨테이너의 너비가 무시됩니다.bootstrap-responsive가 .container 너비를 초과합니다.

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="/css/Site.css"/> 
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/> 

어떤 이유로 응답 CSS 파일에 지정된 폭이 :

이 내 CSS 파일의 순서인가? bootstrap-responsive.css를 수동으로 편집하지 않고도이를 고칠 수있는 방법이 있습니까? (좋은 생각이 될 것 같습니다)

내 사이트를 모바일/태블릿에 알맞게 만들려면 bootstrap-responsive.css가 필요합니다. .

답변

1

적절한 구조를 유지하는 데 필요한 최소 너비의 부트 스트랩입니다. 다른 한편으로는, 단순히 당신의 CSS 코드 after bootstrap을 반응 적으로 두어 규칙이 부트 스트랩의 규칙을 덮어 쓸 수 있습니다.

+0

사실 .. 내가 그렇게 할 때 내가 원하는 것보다 더 많이 오버라이드하겠다. S – msk

+1

Site.css와 bootstrap-responsive.css의 순서를 바꾼다. –

0

개인적으로 나는 다른 모든 CSS 파일 다음에 내 자신의 사용자 정의 스타일 시트를로드하는 경향이 있습니다. 하지만 전역 속성 ... 또는 레이아웃 관련 속성의 기본값을 변경하지 않도록해야합니다. 예 : . 컨테이너

일반적으로이 클래스는 여러 번 재사용되며 다음과 같이 조정될 수 있습니다. 다른 장치 및 상황. 그래서 bootstrap-responsive.css에서 이러한 값을 변경하는 것이 좋습니다.이 파일은 모든 미디어 쿼리를 포함하고 있습니다.

그렇지 않으면 원하는 응답이 무시되고 결국 중요한 예외가있는 CSS 속성이 발생할 수 있습니다. 반드시 피해야합니다.

0

CSS를 사용하면 스타일 정보의 마지막 인스턴스가 우선 순위를 갖습니다. 나는 두 개의 서로 다른 스타일 시트에 연결하면 충돌이있는 경우 .container 요소가있는 style.css 파일의 변경 인 경우 예를 들어, 두 번째는,이 예에서는 ...

<link rel="stylesheet" type="text/css" href="bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

을 우선합니다, style.css의 스타일 데이터는 충돌이있는 경우에만 우선 순위를 갖습니다. 이 효과는 단일 HTML 문서에서 외부 및 인라인 CSS를 모두 갖는 것과 유사합니다. Here is a jsFiddle을 참조하십시오. 여기에서는 인라인 스타일이 우선시되고 배경을 검정색으로 유지하면서 텍스트의 색상을 오렌지색으로 만듭니다.