[css] 부트 스트랩 요소 100 % 너비

100 % 컬러 블록을 번갈아 가며 만들고 싶습니다. “이상적인”상황은 현재 상황뿐 아니라 첨부 파일로 설명됩니다.

원하는 설정 :

http://i.imgur.com/aiEMJ.jpg

현재 :

http://i.imgur.com/3Sl27.jpg

내 첫 번째 아이디어는 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부분은 콘텐츠가 고정 된 너비로 포장되어 있는지 확인합니다.

이 접근 방식은 효과가 있지만 개인적으로 모든 중첩이 마음에 들지 않습니다. 그러나 지금까지 더 나은 해결책을 찾지 못했습니다.


답변

빠른 답변

  1. 를 사용하여 여러 중첩되지 않은 .container
  2. 그 랩 .container당신이에서 전체 폭 배경을 갖고 싶어들div
  3. 래핑 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에 고정 된 너비가 있으면 수평으로 자동 중앙에 배치됩니다.

따라서 다음과 같이 입력하든 차이가 없습니다.

  1. 신체의 직접적인 자식
  2. (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>

데모 : http://www.bootply.com/tVkNyWJxA6


답변

대신에

style="width:100%"

사용해보십시오

class="col-xs-12"

그것은 당신에게 1 문자를 저장합니다 🙂