불필요한 패딩을 추가하는 그리드가있는 부트 스트랩 3 및 4 컨테이너 유체

내 콘텐츠가 유동적 .container-fluid이기를 원 하지만 Bootstrap의 그리드와 함께 사용할 때 여전히 패딩이 표시됩니다. 패딩을 제거하려면 어떻게해야합니까?

.row로 패딩을 얻지 못했지만 열을 추가하고 싶습니다. 그러 자마자 패딩이 돌아 왔습니다.

열을 전체 너비로 사용할 수 있기를 원합니다.

예 :

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

내가 가진 해결책 :

bootstrap.css, linke 1427 및 1428 (v3.2.0) 재정의

padding-right: 15px;
padding-left: 15px;

에

padding-right: 0px;
padding-left: 0px;

또한이 문제를 "수정"할 각 컨테이너에 "행"을 추가해야합니다!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

http://jsfiddle.net/3px20h6t/ 참조

Bootstrap에서 실제 CSS를 찾으십시오.

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

.container-fluid클래스 를 추가하면 15px의 수평 패딩이 추가 .row되며, 행에 설정된 음수 여백 으로 클래스를 자식 요소로 추가하면 동일한 내용이 제거됩니다 .

5 년이 지났고, 부트 스트랩 규칙을 따르지 않거나 반대 하는 답변이 너무 많 거나 실제로 질문에 답하지 않는 것이 이상합니다.

짧은 대답 :
단순히 no-gutters패딩을 제거하려면 행에서 Bootstrap의 클래스를 사용하십시오.

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(또한 </div>파일 끝에 추가 하는 것을 잊었습니다 . 위 코드에서도 수정되었습니다.)

노트 :

컨테이너 자체의 패딩도 제거 하려는 경우가 있습니다 . 이 경우 문서에서 권장하는 드롭 .container또는 .container-fluid클래스를 고려 하십시오 .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

긴 답변 :

당신이 얻는 패딩은 실제로 Bootstrap의 문서에 문서화되어 있습니다 .

행은 열의 래퍼입니다. 각 열에는 열 사이의 간격을 제어하기위한 가로 여백 (거터라고 함)이 있습니다. 이 패딩은 음수 여백이 있는 행에 적용됩니다 . 이렇게하면 열의 모든 콘텐츠가 시각적으로 왼쪽 아래로 정렬됩니다.

또한 문서화 된 솔루션에 대해 :

열에는 개별 열 사이에 거터를 만들기위한 가로 패딩이 있지만 행에서 여백을 제거 하고 .row에 .no- gutters를 사용하여 열에서 패딩을 제거 할 수 있습니다 .

용기를 떨어 뜨리는 것과 관련하여 :

엣지 투 엣지 디자인이 필요하십니까? 상위 .container 또는 .container-fluid를 삭제하십시오.

보너스 : 다른 답변에서 발견 된 실수에 대해

• 문서에 나와있는 것처럼 모든 콘텐츠를 col-s에 넣고 row-s로 래핑 했는지 확인하는 대신 부트 스트랩의 컨테이너 클래스를 해킹하지 마십시오 .

그리드 레이아웃에서 콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식 일 수 있습니다.

• 여전히 해킹을해야한다면 (누군가가 이미 문제를 엉망으로 만들고 문제를 신속하게 해결해야하는 경우) px-0대신 수평 패딩을 제거 pl-0 pr-0하거나 스타일을 재창조하기 위해 부트 스트랩을 사용 하는 것이 좋습니다 .

나는 Tim과 동일한 요구 사항이 있다고 생각하지만 '일반적인 내부 거터가있는 뷰포트 가장자리 간 열'솔루션을 제공하는 답변은 없습니다. 또는 그것을 넣는 다른 방법 : 첫 번째와 마지막 열이 컨테이너 패딩으로 쪼개지고 뷰포트의 가장자리로 흐르면서 열 사이의 정상적인 거터를 유지하는 방법은 무엇입니까?

내가 알 수 있듯이 깔끔하고 깨끗한 해결책은 없습니다. 이것이 저에게 효과가 있지만 Bootstrap에서 지원하는 것보다 훨씬 뛰어납니다. 그러나 지금은 작동합니다 (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

샘플 HTML :

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS :

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

트릭은 div행과 열 사이에 a를 중첩 하여 컨테이너 패딩으로 밀어 넣을 추가 -15px 여백을 생성하는 것입니다. 여분의 음수 여백은 작은 뷰포트에서 수평 스크롤 (공백으로)을 만듭니다. 억제하려면에 추가 overflow-x: hidden해야합니다 .row.

이에 대해 동일하게 작동 .container-fluid으로 .container.

다음은 Bootstrap 4에 대한 간략한 요약입니다.

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

그것은 나를 위해 작동합니다.

왼쪽과 오른쪽 패딩을 0으로 표시 하여 container-fluid에 의해 추가 된 패딩을 무효화하지 않는 이유는 무엇 입니까?

<div class="container-fluid pl-0 pr-0">

더 나은 방법? 컨테이너 수준에서 전혀 패딩 없음 (깨끗함)

<div class="container-fluid pl-0 pr-0">

Bootstrap의 .container 클래스에서만 이러한 CSS 속성이 필요하며 컨테이너의 내용이 그에게서 나오지 않고 일반 그리드 시스템을 그 안에 넣을 수 있습니다 (뷰포트에서 scroll-x없이).

HTML :

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS :

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

새로운 알파 버전에서는 유틸리티 간격 클래스를 도입했습니다 . 그런 다음 영리한 방법으로 사용하면 구조를 조정할 수 있습니다.

간격 유틸리티 클래스

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0및 pr-0열에서 선행 및 후행 패딩을 제거합니다. 남은 한 가지 문제는 여전히 음의 여백이 있기 때문에 열에 포함 된 행입니다. 이 경우 :

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

버전 차이

또한 유틸리티 간격 클래스는 버전 이후 변경되었습니다 4.0.0-alpha.4. 2 개의 대시 (예 : => p-x-0등) 로 구분되기 전에 p-l-0...

버전 3에 대한 주제를 유지하려면 이것은 내가 Bootstrap 3 프로젝트에서 사용하는 것이며이 특정 간격 유틸리티에 대한 나침반 설정 을 이중 대시 또는 bootstrap-sass(버전 3) 또는 bootstrap(버전 4.0.0-alpha.3)에 포함합니다. bootstrap(버전 4.0.0-alpha.4 이상), 단일 대시 포함.

또한 최신 버전은 비율이 3 배가 아닌 5 배까지 올라갑니다 (예 : pt-5padding-top 5).

나침반

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

CSS 출력

물론 생성 된 css 파일에서만 패딩 간격 클래스를 항상 복사 / 붙여 넣기 할 수 있습니다.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

아무도 그 질문에 정답을주지 않았다고 생각합니다. 내 작업 솔루션은 다음과 같습니다. 1. 컨테이너 유체 클래스 예제 (.maxx)와 함께 다른 클래스를 선언합니다.

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. 그런 다음 css 부분에서 특이성을 사용하여 다음을 수행하십시오.

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

이것은 100 % 작동하며 왼쪽과 오른쪽에서 패딩을 제거합니다. 이게 도움이 되길 바란다.

당신은 피규로 작업하는 경우에는 설정할 수 있습니다 @grid-gutter-width에서 30px에0

나는 사용 <div class="container-fluid" style="padding: 0px !important"> 했고 작동하는 것 같습니다.

나는 이것으로 어려움을 겪고 있으며 마침내 내가 그것을 알아 냈다고 믿습니다. 이 질문에 얼마나 많은 실패한 답이 있는지 놀랍습니다.

모든 .col 요소에서 패딩을 제거하고 .container-fluid에서도 패딩을 제거하기 만하면됩니다.

내 CSS 파일에 다음을 추가하여 내 프로젝트에서 약간 엉성하게 수행했습니다.

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

내가 사용하는 모든 다른 col 크기를 설명하기 위해 다른 col 크기가 있습니다. CSS를 작성하는 더 깨끗한 방법이 있다고 확신하지만 이것은 최종 결과를 보여줍니다.

사용 px-0상의 container와 no-gutters상의 row패딩을 제거 할 수 있습니다.

부트 스트랩 4 에서 인용 -그리드 시스템 :

행은 열의 래퍼입니다. 각 열에는 열 사이의 간격을 제어하기위한 가로 여백 (거터라고 함)이 있습니다. 이 패딩은 음수 여백이있는 행에 적용됩니다. 이렇게하면 열의 모든 콘텐츠가 시각적으로 왼쪽 아래로 정렬됩니다.

열 그러나, 당신이 컬럼의 행에서 마진과 패딩을 제거 할 수 있습니다, 개별 열 사이의 도랑을 만들 수있는 수평 패딩이 .no-gutters온 .row.

다음은 라이브 데모입니다.

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

이유는이 작품이이다 container-fluid하고 col모두 다음과 같은 패딩을 가지고 :

padding-right: 15px;
padding-left: 15px;

px-0에서 수평 패딩을 제거 할 수 있습니다 container-fluid과 no-gutters에서 패딩을 제거 할 수 있습니다 col.