부트 스트랩 : 컨테이너의 너비를 어떻게 변경합니까?
고정 컨테이너 클래스로 웹 사이트를 개발하기 위해 Twitter Bootstrap을 사용했지만 이제 클라이언트는 웹 사이트가 1170px가 아닌 1000px 너비를 원합니다. .less 파일을 사용하지 않습니다.
이 문제를 해결하는 빠른 방법이 있습니까?
Bootstrap 사이트 의 Customize 섹션으로 이동하여 원하는 크기를 선택하십시오. 당신은 설정해야합니다 @gridColumnWidth및 @gridGutterWidth변수.
예를 들면 다음 @gridColumnWidth = 65px과 @gridGutterWidth = 20pxA의 결과 1000px레이아웃.
그런 다음 다운로드하십시오.
해결책은 다음과 같습니다.
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
@Bastardo의 답변 에서와 같이 Bootstrap을 사용자 정의하는 것과 비교 하여이 작업의 장점은 Bootstrap 파일을 변경하지 않는다는 것입니다. 예를 들어, CDN을 사용하는 경우에도 CDN에서 대부분의 부트 스트랩을 다운로드 할 수 있습니다.
LESS 파일을 사용하지 않을 것이라고 말한 뒤 등을 묶고 있습니다. 2.0을 사용하여 첫 번째 Twitter Bootstrap 테마를 빌드했으며 CSS에서 override.css 파일을 작성하여 모든 작업을 수행했습니다. 제대로 작동하려면 며칠이 걸렸습니다.
이제 3.0이 있습니다. LESS를 배우는 데 시간이 덜 걸린다는 것을 확신시켜 드리겠습니다. 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 파일에서 미디어 쿼리를 사용하여 쉽게 변경할 수 있습니다. 방금 이것을했는데 아름답게 작동합니다.
미디어 쿼리의 "최소 너비"값은 CSS에 1200px 보다 큰 화면 (또는 포함하도록 선택한 너비) 에서만 컨테이너 너비를 1000px로 변경 하도록 지시합니다. 이렇게하면 사이트의 응답 성이 유지되므로 화면 크기가 해당 값 (작은 모니터, 태블릿, 스마트 폰 등) 이하로 떨어지더라도 사이트는 더 작은 화면에 맞게 조정됩니다.
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
너비가 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가 필요하지 않습니다.
부트 스트랩 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 값만 변경하면 중단 점에 대해서는 신경 쓰지 않았습니다.
컨테이너 크기
@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)
컨테이너 크기 섹션 1140에서970
도움이 되길 바랍니다.
thank you for your correct. link for customize bootstrap: https://getbootstrap.com/docs/3.4/customize/
Add these piece of CSS in your css styling. Its better to add this after the bootstrap css file is added in order to overwrite the same.
html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`
참고URL : https://stackoverflow.com/questions/15884102/bootstrap-how-do-i-change-the-width-of-the-container
'Programming' 카테고리의 다른 글
| TextinputLayout의 레이블 색상을 변경하고 android 텍스트 밑줄을 편집하는 방법 (0) | 2020.08.06 |
|---|---|
| git : 한 리포지토리의 커밋에 의해 도입 된 변경 사항을 다른 리포지토리에 적용 (0) | 2020.08.06 |
| 스레드 안전 사전을 구현하는 가장 좋은 방법은 무엇입니까? (0) | 2020.08.06 |
| 경계 상자에 맞게 이미지 크기 조정 (0) | 2020.08.06 |
| iOS에서 ISO 8601 날짜를 얻으려면 어떻게합니까? (0) | 2020.08.06 |