부트를 사용하여 바디의 최대 너비 설정

부트를 사용하여 바디의 최대 너비 설정

---

Twitter Bootstrap으로 첫 번째 사이트를 구축하고 유동적 인 레이아웃을 실험했습니다. 컨테이너를 유동적으로 설정했습니다. 이제 내부 콘텐츠가 전체 페이지 너비를 차지하고 브라우저 크기가 조정됨에 따라 조정됩니다.

작업중 인 디자인은 최대 너비가 950px로 만들어졌습니다.

나는 확인 variables.less했고 responsive.less, 부트 문서를 확인했지만 이런 일이 발생하는지 잘 모르겠습니다. 또한 다음을 서열 추가해 보았습니다 style.css.

body {
    max-width: 950px;
}

---

편집하다

이를 수행하는 더 좋은 방법은

1. 더 약간의 파일을 main less 파일로 만듭니다 (예 : bootstrap.less).

2. 필요한 모든 부트 파일을 가져옵니다. (이 경우에는 반응 형이 약간 파일을 모두 가져 오기 오지만 반응 형은 1200px

3. 원래의 부트 스크립트 덜 파일에서 수정해야하는 경우 부트 실행의 약간 코드를 쓰기 위해 직접 작성하면됩니다. (@import {bootstrap 's less file}; 약간의 코드 / 파일을 넣는 것을 잊지 않고.)

실물

나는 같은 문제를 가지고있다. 이것이 내가 고친 방법입니다.

미디어 쿼리를 찾습니다.

@media (max-width:1200px) ...

그것을 제거하십시오. (단지가 아닌 모든 것을 의미합니다 @media (max-width:1200px))

Bootstrap의 기본 너비는 940px 아무것도 할 수 없습니다.

최대 너비를 소유 원하는 너비와 일치하는 미디어 쿼리에서 CSS 규칙을 수정하기 만하면됩니다.

---

@media (max-width:1200px)... 를 제거하지 않아도 됩니다.

내 응용 프로그램은 max-width1600px입니다. 저에게 효과가 떨어져 방법은 다음과 가변합니다.

1. bootstrap-custom.css 만들기-가능한 한 원래의 부트 스트랩 CSS를 재정의하고 싶지 않습니다.

2. bootstrap-custom.css 내에서 다음 코드를 포함하여 컨테이너 유체를 재정의합니다.

이렇게 :

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

---

responsive.less에서 responsive-1200px-min.less를 가져옵니다. 줄을 주석 처리 할 수 ​​있습니다.

// Large desktops

@import "responsive-1200px-min.less";

이렇게 :

// Large desktops

// @import "responsive-1200px-min.less";

---

불행히도 위의 어느 것도 문제를 해결하지.

나는 bootstrap-responsive.css를 편집하고 갑자기 갑자기 기 때문에 쉬운 길을 갔다.

1. bootstrap-responsive.css보다 우선 순위가 높은 CSS를 만듭니다.
2. 의 모든 콘텐츠 복사 @media (min-width: 768px) and (max-width: 979px)(오늘 같은 최신 부트 버전 2.3.1에 맞춰 461)
3. CSS에 우선 순위가 우선 순위가 높았어요.
4. CSS에서 이전에 @media (min-width: 979px)말한 곳에 있었다 @media (min-width: 768px) and (max-width: 979px). 이 768에서 979 스타일을 768 이상의 모든 스타일로 설정합니다.

그게 다야. 최적이 아닙니다. 복제 된 CSS가 100 % 완벽하게 작동합니다!

---

이것이 여기서 말하는 것이 모르겠습니다. 의 설정 .container폭은 부트 보안 웹 사이트에서 설정해야합니다. 개인적으로 CSS 파일 내에서 .container1600px 크기 를 조정하기 위해 편집하거나 만질 필요 가 없습니다. 사용자 정의 탭에는 미디어 및 웹 응답을 제공하는 세 가지 섹션이 있습니다.

• 미디어 쿼리 중단 점
• 그리드 시스템
• 컨테이너 크기

게다가 미디어가 중단 점을 조회 나는 대부분의 사람들이에 참조 생각, 또한 변경했습니다 나 @container-desktop에 (1130px + @grid-gutter-width)와 @container-large-desktop에 (1530px + @grid-gutter-width). 이제 .container브라우저가 ~ 1600px 및 ~ 1200px로 확장 너비 가 변경됩니다. 도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/9730263/setting-max-width-for-body-using-bootstrap