부트 스트랩 : 컨테이너의 너비를 어떻게 변경합니까?

126

고정 컨테이너 클래스가있는 웹 사이트를 개발하기 위해 Twitter Bootstrap을 사용했지만 이제 클라이언트는 웹 사이트가 1170px가 아닌 1000px 너비를 원합니다. .less 파일을 사용하지 않습니다.

이 문제를 빠르게 해결할 수있는 방법이 있습니까?

twitter-bootstrap

— 알렉스
소스

여기 에 대한 답변을 참조하십시오. 그 답변 에서 고정 전용 바이올린 으로 문제가 해결 될 것이라고 생각합니다 .

— prem

@prem, tx하지만 스팬 또는 컨테이너와 같은 부트 스트랩 클래스를 사용하지 않기 때문에 예제를 얻지 못했습니다. 이 프로젝트에 필요한 것은 반응 형 부트 스트랩을 사용하여 컨테이너의 최대 값을 940px로 설정하는 것입니다.

— alex

75

Bootstrap 사이트 의 Customize 섹션으로 이동하여 원하는 크기를 선택합니다. @gridColumnWidth및 @gridGutterWidth변수 를 설정해야 합니다.

예 : @gridColumnWidth = 65px및 레이아웃의 @gridGutterWidth = 20px결과 1000px.

그런 다음 다운로드하십시오.

— Albertedevigo
소스

(12 * (gridColumnWidth) + 12 (gridGutterWidth))는 1000이 아니기 때문에 gridColumnWidth 및 gridGutterWidth 변수를 변경하여 정확한 1000px 컨테이너에 도달 할 수 없습니다. 그 맞습니까?

— prem

15

이론적으로 1000px와 일치하는 무한한 조합이 있습니다. 예 : 12 * 65 + 11 * 20 = 1000 (열 사이에 11 개의 거터 만 있음).

— albertedevigo

허! 나는 정말로 단순한 것을 인식하지 못했습니다. 어쨌든 당신의 것이 적절한 해결책이었습니다.

— prem

게시물 주셔서 감사합니다. 도움이되었습니다.;) 참고 : 실제로 1000px 너비에 대해 전체 픽셀을 사용하는 정확히 7 개의 솔루션이 있습니다. (칼럼 너비 10, 21, 32, 43, 54, 65 및 76)

— dfherr

@dfherr "실제적으로"라고 말할 때 정확히 무슨 뜻인지 모르겠지만 CSS는 픽셀에 대해 십진수 값을 지원한다는 점을 명심하십시오. 따라서 무한한 해결책이 있습니다. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

231

해결책은 다음과 같습니다.

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

@Bastardo의 답변 에서와 같이 Bootstrap을 사용자 정의하는 것과 비교하여 이것을 수행하는 장점은 Bootstrap 파일을 변경하지 않는다는 것입니다. 예를 들어 CDN을 사용하는 경우 CDN에서 대부분의 부트 스트랩을 계속 다운로드 할 수 있습니다.

— Mcbjam
소스

10

대부분의 답변은 CDN을 무시합니다. 귀하의 답변은 완벽한 솔루션입니다.

— Charles Watson

2

CDN을 사용하는 사람들에게 완벽합니다. 빌드시 LESS (4가 도착하면 SASS)를 수정하는 것은 자체 부트 스트랩 CSS를 호스팅하는 사람들에게 완벽합니다. 그러나 제공된 사용자 정의 LESS (또는 SASS)를 가져온 후 수정하면 일반적으로 diff를 수행하지 않고도 기본 LESS를 업그레이드 할 수 있습니다.

— Greg Pettit

2

나는 이것이 정말로 늦었다는 것을 알고 있지만, 위의 코드에 width : auto를 추가하면 컨테이너가 더 커지는 경향이 있습니다. 컨테이너를 최대 1170보다 크게 만들 수 있습니다.

— 릭 칼더

제가 찾던 것입니다. 감사합니다.

— tedebus

20

당신은 당신이 더 적은 파일을 사용하지 않을 것이라고 말하면서 등 뒤에서 하나를 묶고 있습니다. 2.0을 사용하여 첫 번째 Twitter Bootstrap 테마를 만들고 CSS로 모든 작업을 수행했습니다. override.css 파일을 만들었습니다. 제대로 작동하는 데 며칠이 걸렸습니다.

이제 3.0이 있습니다. CSS에 익숙하다면 미친 CSS 재정의를 모두 수행하는 것보다 훨씬 간단하게 배우는 데 시간이 덜 걸린다는 것을 확신합니다. 원하는대로 변경하는 것은 케이크 조각입니다.

Bootstrap 3.0에서는 컨테이너 클래스가 너비를 제어하고 포함 된 모든 스타일이 컨테이너를 채우기 위해 조정됩니다. 컨테이너 너비 변수는 variables.less 파일의 맨 아래에 있습니다.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

일부 사이트는 1020 디스플레이를 채우기에 충분한 콘텐츠가 없거나 미적 이유로 더 좁은 프레임을 원합니다. BS는 12 열 그리드를 사용하기 때문에 960과 같은 배수를 사용합니다.

— 바스 타르도 수시오
소스

4

작동하지만 : 변수 이름은 @container-sm, @container-md및 @container-lg(현재)

— Andreas Dolk 2015

1

@Bastardo 좋은 이름 일

— 오메르

18

@mcbjam이 이미이 대답을했지만 여기에 좀 더 설명이 있습니다.

BS를 다운로드하지 않고도 CSS 파일의 미디어 쿼리를 사용하여 쉽게 변경할 수 있습니다. 방금했고 아름답게 작동합니다.

미디어 쿼리의 "최소 너비"값은 1200px 보다 큰 화면 (또는 여기에 포함하도록 선택한 너비) 에서만 컨테이너 너비를 1000px로 변경하도록 CSS에 지시 합니다. 이렇게하면 사이트의 응답 성이 유지되므로 화면 크기가 해당 값 (작은 모니터, 태블릿, 스마트 폰 등) 아래로 이동해도 사이트는 여전히 작은 화면에 맞게 조정됩니다.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

— 제프 슈 워팅
소스

13

부트 스트랩 4의 경우 Sass를 사용하는 경우 여기에 편집 할 변수가 있습니다.

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

이 변수를 재정의하기 위해 부트 스트랩을 가져 오기 전에 .sass 파일에서! default없이 $ container-max-widths를 선언했습니다.

참고 : xl 값만 변경하면되므로 중단 점에 대해서는 신경 쓰지 않았습니다.

— 가이 조쿠 감 바레
소스

12

1000px 너비 속성으로 고유 한 콘텐츠 컨테이너 클래스를 설정 한 다음 컨테이너 대신 컨테이너 유체 부 스트랩 클래스를 사용합니다.

작동하지만 최상의 솔루션이 아닐 수 있습니다.

— 지역
소스

6

래퍼 선택기를 사용하고 전체 페이지를 캡슐화하기 위해 해당 래퍼 내부에 100 % 너비가있는 컨테이너를 만듭니다.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

이제 최대 너비는 1000px로 설정되며 더 적거나 sass가 필요하지 않습니다.

— 래리 저드
소스

0

컨테이너 크기

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

섹션 컨테이너 크기에서 다음 1140으로 변경하십시오 .970

나는 그것의 도움을 바랍니다.

당신의 정답에 감사드립니다. 부트 스트랩 사용자 지정 링크 : https://getbootstrap.com/docs/3.4/customize/

— 그래서 산토
소스

-3

CSS 스타일에이 CSS 조각을 추가하세요. 부트 스트랩 css 파일을 추가 한 후이를 덮어 쓰려면 추가하는 것이 좋습니다.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— 마헨드라
소스