100 % 컬러 블록을 번갈아 가며 만들고 싶습니다. “이상적인”상황은 현재 상황뿐 아니라 첨부 파일로 설명됩니다.
원하는 설정 :
현재 :
내 첫 번째 아이디어는 div 클래스를 만들고 배경색을 지정하고 100 % 너비를 지정하는 것이 었습니다.
.block {
width: 100%;
background: #fff;
}
그러나 이것은 분명히 작동하지 않는다는 것을 알 수 있습니다. 컨테이너 구역에 국한되어 있습니다. 컨테이너를 닫으려고했지만 작동하지 않았습니다.
답변
container
클래스는 의도적으로 100 % 폭 아니다. 뷰포트의 너비에 따라 고정 너비가 다릅니다.
화면의 전체 너비로 작업하려면 .container-fluid
다음을 사용하십시오 .
부트 스트랩 3 :
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
부트 스트랩 2 :
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
답변
이것이 Bootstrap 3으로 원하는 설정을 달성하는 방법입니다 .
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
이 container-fluid
부분은 전체 너비에 걸쳐 배경을 변경할 수 있는지 확인합니다. 이 container
부분은 콘텐츠가 고정 된 너비로 포장되어 있는지 확인합니다.
이 접근 방식은 효과가 있지만 개인적으로 모든 중첩이 마음에 들지 않습니다. 그러나 지금까지 더 나은 해결책을 찾지 못했습니다.
답변
빠른 답변
- 를 사용하여 여러 중첩되지 않은
.container
의 - 그 랩
.container
당신이에서 전체 폭 배경을 갖고 싶어들div
- 래핑 div에 CSS 배경 추가
바이올린 : 단순 : https://jsfiddle.net/vLhc35k4/ , 컨테이너 테두리 : https://jsfiddle.net/vLhc35k4/1/
HTML :
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS : .specialBackground{ background-color: gold; /*replace with own background settings*/ }
추가 정보
중첩 된 컨테이너를 사용하지 마십시오.
많은 사람들이 중첩 된 컨테이너를 사용해야한다고 잘못 제안합니다.
글쎄, 당신은 해서는 안됩니다 .
중첩 될 요소가 아닙니다. ( 문서의 ” 컨테이너 “섹션 참조 )
작동 원리
div
기본적으로 문서 본문의 전체 너비에 걸쳐있는 블록 요소이며 전체 너비 기능이 있습니다. 또한 콘텐츠의 높이도 있습니다 (달리 지정하지 않은 경우).
부트 스트랩 컨테이너는 바디의 직접적인 자식 일 필요는 없으며, 패딩이 있고 화면 너비가 가변적 인 고정 너비가있는 컨테이너 일뿐입니다.
기본 그리드 .container
에 고정 된 너비가 있으면 수평으로 자동 중앙에 배치됩니다.
따라서 다음과 같이 입력하든 차이가 없습니다.
- 신체의 직접적인 자식
- (A)의 직접 자녀 의 기본
div
신체의 직접적인 자식입니다.
“기본” div
이란 div
테두리, 패딩, 치수, 위치 또는 콘텐츠 크기를 변경하는 CSS가 없다는 것을 의미 합니다. display: block;
CSS와 배경이 있는 HTML 요소입니다 .
그러나 물론 수직과 같은 CSS (height, padding-top, …)를 설정하면 부트 스트랩 그리드가 깨지지 않습니다. 🙂
부트 스트랩 자체는 동일한 접근 방식을 사용합니다.
… 전체 자체 웹 사이트 와 “JUMBOTRON”예제 :
http://getbootstrap.com/examples/jumbotron/
답변
vw를 사용하는 해결 방법이 있습니다. 새 유체 용기를 만들 수 없을 때 유용합니다. 이것은 고전적인 ‘컨테이너’div 내부의 전체 크기입니다.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
이 후 사이드 바 문제 (@Typhlosaurus 덕분에)가 있는데,이 js 함수로 해결되어 문서로드 및 크기 조정시 호출됩니다.
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
답변
부트 스트랩 4에서는 ‘w-100’클래스 (w를 너비로, 100을 100 %로)를 사용할 수 있습니다.
여기에서 문서를 찾을 수 있습니다 :
https://getbootstrap.com/docs/4.0/utilities/sizing/
답변
HTML 레이아웃을 변경할 수없는 경우 :
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
답변
대신에
style="width:100%"
사용해보십시오
class="col-xs-12"
그것은 당신에게 1 문자를 저장합니다 🙂