고정 컨테이너 클래스가있는 웹 사이트를 개발하기 위해 Twitter Bootstrap을 사용했지만 이제 클라이언트는 웹 사이트가 1170px가 아닌 1000px 너비를 원합니다. .less 파일을 사용하지 않습니다.
이 문제를 빠르게 해결할 수있는 방법이 있습니까?
답변
Bootstrap 사이트 의 Customize 섹션으로 이동하여 원하는 크기를 선택합니다. @gridColumnWidth및 @gridGutterWidth변수 를 설정해야 합니다.
예 : @gridColumnWidth = 65px및 레이아웃의 @gridGutterWidth = 20px결과 1000px.
그런 다음 다운로드하십시오.
답변
해결책은 다음과 같습니다.
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
@Bastardo의 답변 에서와 같이 Bootstrap을 사용자 정의하는 것과 비교하여 이것을 수행하는 장점은 Bootstrap 파일을 변경하지 않는다는 것입니다. 예를 들어 CDN을 사용하는 경우 CDN에서 대부분의 부트 스트랩을 계속 다운로드 할 수 있습니다.
답변
당신은 당신이 더 적은 파일을 사용하지 않을 것이라고 말하면서 등 뒤에서 하나를 묶고 있습니다. 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과 같은 배수를 사용합니다.
답변
@mcbjam이 이미이 대답을했지만 여기에 좀 더 설명이 있습니다.
BS를 다운로드하지 않고도 CSS 파일의 미디어 쿼리를 사용하여 쉽게 변경할 수 있습니다. 방금했고 아름답게 작동합니다.
미디어 쿼리의 “최소 너비”값은 1200px 보다 큰 화면 (또는 여기에 포함하도록 선택한 너비) 에서만 컨테이너 너비를 1000px로 변경하도록 CSS에 지시 합니다. 이렇게하면 사이트의 응답 성이 유지되므로 화면 크기가 해당 값 (작은 모니터, 태블릿, 스마트 폰 등) 아래로 이동해도 사이트는 여전히 작은 화면에 맞게 조정됩니다.
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
답변
부트 스트랩 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 값만 변경하면되므로 중단 점에 대해서는 신경 쓰지 않았습니다.
답변
1000px 너비 속성으로 고유 한 콘텐츠 컨테이너 클래스를 설정 한 다음 컨테이너 대신 컨테이너 유체 부 스트랩 클래스를 사용합니다.
작동하지만 최상의 솔루션이 아닐 수 있습니다.
답변
래퍼 선택기를 사용하고 전체 페이지를 캡슐화하기 위해 해당 래퍼 내부에 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가 필요하지 않습니다.
