100 % 컬러 블록을 번갈아 가며 만들고 싶습니다. "이상적인"상황은 현재 상황뿐 아니라 첨부 파일로 설명됩니다.
원하는 설정 :
현재 :
내 첫 번째 아이디어는 div 클래스를 만들고 배경색을 지정하고 100 % 너비를 지정하는 것이 었습니다.
.block {
width: 100%;
background: #fff;
}
그러나 이것은 분명히 작동하지 않는다는 것을 알 수 있습니다. 컨테이너 구역에 국한되어 있습니다. 컨테이너를 닫으려고했지만 작동하지 않았습니다.
<div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
답변:
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>
container-fluid가로 스크롤바가 발생합니다. 스타일 시트에이를이 부가를 해결하려면.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
이것이 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바이올린 : 단순 : 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에 고정 된 너비가 있으면 수평으로 자동 중앙에 배치됩니다.
따라서 다음과 같이 입력하든 차이가 없습니다.
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 문자를 저장합니다 :)
.containerdiv 의 전체 너비 인 열이 만들어 지지만 브라우저의 페이지 전체 너비와 같지 않습니다.
콘텐츠 컨테이너를 닫을 수없는 경우가 있습니다. 우리가 사용하는 솔루션은 약간 다르지만 파이어 폭스 스크롤바 크기 때문에 오버 플로우를 방지합니다!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
죄송합니다. CSS도 요청 했어야합니다. 기본적으로 살펴보아야 할 것은 컨테이너 div에 .container { width: 100%; }CSS 의 스타일 을 제공하는 것입니다 . 그러면 동봉 된 div가 자체 너비를 지정하지 않는 한이를 상속합니다. 또한 닫는 태그 몇 개가 누락되었으며 , 적어도이 코드 섹션에서는 열리지 않고 </center>닫힙니다 <center>. 콘텐츠를 포함하는 동일한 div에 이미지를 원하는지 또는 별도의 이미지를 원하는지 확실하지 않아 두 가지 예제를 만들었습니다. jsfiddle이 작은보기 영역을 제공하기 때문에 img의 너비를 100px로 변경했습니다. 당신이 찾고있는 것이 아니라면 알려주세요.
콘텐츠 및 이미지 분리 : http://jsfiddle.net/QvqKS/2/
동일한 div의 콘텐츠 및 이미지 (이미지가 왼쪽으로 떠남) : http://jsfiddle.net/QvqKS/3/
그 목적이 있기 때문에 누군가가, 컨테이너 폭 "무시"를 시도 왜 궁금해 것 입니다 일부 패딩의 내용을 유지하기 위해, 하지만 비슷한 상황이 있었다 (나는 심지어 거기 답하지만, 내 솔루션을 공유하고 싶어하는 이유의 그 ).
내 상황에서는 모든 콘텐츠 (모든 페이지)를 컨테이너 내부에 렌더링 하고 싶었 기 때문에 이것은 내 _Layout.cshtml의 코드 조각이었습니다.
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
@RenderBody()
</div>
</section>
</div>
내 홈 인덱스 페이지 에는 전체 화면 너비 를 채우고 싶은 배경 헤더 이미지가 있으므로 해결책은 Index.cshtml을 다음과 같이 만드는 것입니다.
@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
뷰가 레이아웃의 일부 콘텐츠를 동적으로 대체하도록 허용 (또는 강제) 할 목적으로 섹션이 만들어지기 때문에 이것이 해결 방법을 만드는 것보다 낫다고 생각합니다.
사람들은이 경우 .container-fluid를 사용해야한다고 언급했지만 부트 스트랩에서 패딩을 제거해야합니다.
다음 답변은 어떤 측정에서도 정확히 최적은 아니지만 내부 div를 완전히 늘리는 동안 컨테이너 내 위치를 유지하는 것이 필요했습니다.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});