Bootstrap 3의 열에서 패딩 제거

342

문제:

부트 스트랩 3에서 col-md- *의 오른쪽과 왼쪽에있는 패딩 / 여백을 제거하십시오.

HTML 코드 :

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

원하는 출력 :

현재이 코드는 두 열의 오른쪽과 왼쪽에 패딩 / 여백을 추가합니다. 측면 에서이 여분의 공간을 제거하기 위해 누락 된 것이 무엇인지 궁금합니다.

주의:

"col-md-4"를 제거하면 두 열이 모두 100 %로 확장되지만 서로 옆에 있기를 바랍니다.

css  twitter-bootstrap  html 
— kexxcream
소스
1
부트 스트랩 4의 경우, pl-0 pr-0즉<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad
px-0왼쪽과 오른쪽이 모두 더 짧 습니다.
— Théophile

답변:

454

일반적으로 .row두 개의 열을 감싸는 데 사용 하는 것이 아니라 .col-md-12다른 열을 포함하는 열입니다. Afterall는, .row여분의 마진과 그 패딩이없는 col-md-12가져다 줄을 또한 열이 부정적인 왼쪽 및 오른쪽 여백에 소개 것이라고 공간을 할인.

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

여백 / 여백 을 실제로 제거하려면 클래스를 추가하여 각 하위 열의 여백 / 패딩을 필터링하십시오.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— 매키
소스
컨테이너 클래스에 .with-padding을 추가해야합니까? 제공 한 CSS 코드를 사용하여 .nopadding을 .col-md-8 div에 추가하면 충분합니다.
— Charles Ingalls
59
나는 보통 사용자 정의 CSS에 3 개의 추가 클래스를 만듭니다. 즉, .padding-0왼쪽 및 오른쪽 패딩 (만)을 0으로 설정합니다. .padding-sm패딩을 2px로 .padding-md설정하고 패딩을 5px로 설정합니다. 일반적인 패딩은 15px (사용자 정의되지 않은 경우)이므로 추가 클래스로 충분합니다.
— MichaelJTaylor
그런데 셀에만 그것의 새로운 라인을 이동
— ozanmuyes
6
일반적인 패딩은 변수로 사용자 정의됩니다. @ grid-gutter-width : 30px;
— Vladislav Lezhnev
6
제거 패딩이나 클래스를 생성에 미리 정의 된 부트 스트랩이 유일한 해결책이된다
— Gaurav 가르 왈
186

부트 스트랩 4 가 .no-gutters클래스 를 추가했습니다 .

부트 스트랩 3 : 나는 항상이 스타일을 내 부트 스트랩 LESS / SASS에 추가합니다.

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

그런 다음 HTML에서 다음을 작성할 수 있습니다.

<div class="row row-no-padding">

하위 열만 타겟팅하려는 경우 하위 선택기 (감사 John Wu)를 사용할 수 있습니다.

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

특정 장치 크기에 대해서만 패딩을 제거 할 수도 있습니다 (SASS 예).

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

작은 장치를 위쪽으로 지원하려면 미디어 쿼리의 최대 너비 부분을 제거 할 수 있습니다.

— 마틴 에드워즈
소스
10
이것은 중첩과 별도로 일반 CSS이므로 SASS에도 동일하게 작동합니다.
— martinedwards
4
직접 자식 선택기를 사용하여 성능을 향상시키는 것이 좋습니다. & >[class*="col-"]대신 사용하십시오 .
— John Wu
3
@JohnWu는 중첩 된 행이 스타일을 상속하지 못하게하여 약간의 문제를 일으켰습니다. 감사!
— Troy Carlson
2
[class^="col-"], [class*=" col-"] {...}실수로 foocol-예를 들어 명명 된 클래스를 대상으로하지 않도록 대신 사용해야합니다 . 이렇게하면 시작 시 해당 클래스 이름을 가진 요소를 대상으로 하거나 다른 클래스 이름의 일부로 찾은 문자열을 대상으로하지 않고 보조 클래스로 사용할 수 있습니다.
— Brett
1
이런 담배! 필자는 iPhone 6이 때때로 웹 페이지에서 자동 확대 기능을 사용하기 때문에 iOS 뷰포트 버그라고 생각하는 것과 싸우는 데 몇 시간을 보냈습니다. col padding을 제거한 후 autozoom이 적절하게 작동한다고 생각합니다! 감사!
— Ryan
45

열의 패딩 만 줄이면 트릭이 발생하지 않습니다. 페이지 너비를 확장하여 페이지의 나머지 부분과 불균일하게 만듭니다 (예 : navbar). 행의 마이너스 마진을 동일하게 줄여야합니다. @martinedwards의 LESS 예를 들면 다음과 같습니다.

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— 포브
소스
행이 컨테이너 나 다른 열에없는 경우에만 문제가됩니다. 마이너스 마진은 그 요소들로부터 패딩을 상쇄합니다
— Fred Stark
내가 필요한 !important이 작업하기 위해 여백의 모두
— 필립 Bijker
22

SASS 믹스 인 전용 :

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

그런 다음 HTML에서 사용할 수 있습니다 

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

물론 필요한 선언 만 @include 할 수 있습니다.

— 비탈리 실린
소스
이 상황 에서이 믹스 인 (고마워)을 사용하려고하는데 패딩이 작동하지 않습니다. .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
나는 무엇이 잘못되었는지 알아 낸다. 이 솔루션이 작동하려면 다른 믹스 인을 만들어야합니다. Btw, SASS mixin 주셔서 감사합니다 :)
— jpcmf80
나는 이것을 @mixin nopadding{ padding:0!important; }내 코드로 _mixin.scss 만든 다음 @include nopadding;위의 코드에 추가 합니다. :)
— jpcmf80
18

이후에는 Bootstrap4에서만 사용 가능

<div class="p-0 m-0">
</div>

참고 : .p-0 및 .m-0은 이미 bootstrap.css를 추가했습니다.

— 알리 곡셀 벡 타스
소스
15

부트 스트랩 3의 내장 클래스 인 "패딩 없음"을 추가하기 만하면됩니다.

— 바가 프
소스
열에 추가 할 때 나를 위해 작동합니다. 여러 패딩을 피하기 위해 중첩 열을 사용할 때 사용해야합니다.
— NicolasBernier
4
또한 no-gutter부모 에 클래스를 추가 할 수 있습니다 .row.
— ArtBIT
3
내가 생각 @ArtBIT 당신은 코드를 필요 no-gutters에 따라 v4-alpha.getbootstrap.com/layout/grid/#no-gutters . 내장되어 있지 않습니다.
— Caltor
12

부트 스트랩 4 에는이를 수행하는 기본 클래스가 있습니다. 클래스 .no-gutters를 상위에 추가하십시오..row

— 기 illa 고티에
소스
10

LESS 소스에서 부트 스트랩을 컴파일하는 경우에만 가능한 또 다른 솔루션은 열의 패딩을 설정하는 변수를 재정의하는 것입니다.

variables.less파일 에서 변수를 찾을 수 @grid-gutter-width있습니다.

소스에서 다음과 같이 설명됩니다.

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

이것을 0으로 설정하고 컴파일 bootstrap.less하고 결과를 포함시킵니다 bootstrap.css. 끝났습니다. 이미 부트 스트랩 소스를 사용하고 있다면 추가 규칙을 정의하는 대안이 될 수 있습니다.

— 링크
소스
6

Bootstrap 3 버전 3.4.0 부터는 패딩을 제거하는 공식적인 방법이 있습니다.row-no-gutters .

설명서의 예 :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— Smi
소스
3

위의 솔루션 중 어느 것도 나를 위해 완벽하게 작동하지 않았습니다. 이 대답에 따라 나는 나에게 맞는 것을 만들 수 있었다. 여기에서는 미디어 쿼리를 사용하여 이것을 작은 화면으로 만 제한합니다.

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}
— rlv-dan
소스
3

부트 스트랩 3.7.7 이하를 사용하여 흑백 열에서 간격을 제거하십시오.

.no-gutter는 행 DIV에 추가 할 수있는 사용자 정의 클래스입니다.

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— 슈퍼 모델
소스
이것은 효과가 있었고 LESS 또는 SASS가 필요하지 않았습니다. 그러나 컨테이너 클래스를 행에 추가 하고이 추가 스타일을 적용해야한다는 것을 알았습니다 margin:0 auto;.
— Volomike
개발자는이 작업이 완료되면 열 내부에 DIV를 생성하고 자체 여백 크기를 생성하기 위해 여백을 적용해야 함을 인식해야합니다.
— Volomike
2 
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

col-md-4 내부의 div에 행 클래스를 추가 할 수 있으며 행의 -15px 여백은 열에서 여백을 균형 조정합니다. 좋은 설명은 여기 부트 스트랩 3 홈통 및 행에 대해.

— 1 블레이드
소스
2

그냥 사용하는 것이 더 쉽다고 생각합니다 

margin:-30px;

부트 스트랩으로 설정된 원래 값을 무시합니다.

난 노력 했어 

margin: 0px -30px 0px -30px;

그리고 그것은 나를 위해 일했습니다.

— Basheer
소스
1

열을 .row로 감싸고 해당 div에 "no-gutter"라는 클래스를 추가하십시오.

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

그런 다음 아래 내용을 CSS 파일에 붙여 넣으십시오.

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
— 치
소스
1

CSS 참조로 부트 스트랩 거터 제거 / 사용자 정의 : http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
스 니펫 확장

— 하 릭스 8
소스
0

여백을 제거하기 위해 새 클래스를 만들고 추가 여백을 제거하려는 요소에 적용 할 수 있습니다.

.margL0 { margin-left:0 !important }

중요 : 기본 여백을 제거하거나 현재 여백 값을 덮어 쓰는 데 도움이됩니다.

왼쪽에서 여백을 제거하려는 해당 div에 적용하십시오.

— 우딧 반살
소스
0 
<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
— 스릴 락쉬미
소스
답을 설명해 주시겠습니까?
— PKirby
<head> 태그 앞뒤에이 코드를 제공하면 해당 페이지의 해당 클래스 속성이 무시됩니다.
— Sreelakshmi
0

부트 스트랩을 사용하여 열의 여백과 패딩을 관리하기 위해 Less Mixins를 만들 수 있습니다.

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

용법: 

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

마찬가지로 여백 / 패딩 0을 설정할 수 있습니다.

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— 모한 디어
소스
필수 정보가 링크 된 페이지에있는 것 같습니다. 이것은 그렇게하는 길이 아닙니다. 답에 필수 정보를 입력하십시오!
— jogo
또는 사람들은 259 년 동안 159 개의 공감대와 공감대없이 허용 된 답변을 사용할 수 있습니다. 또는 10 가지 이상의 공감대가있는 다른 답변 중 하나입니다. 이 페이지에서 해당 경쟁사와의 경쟁에서 우위를 차지하기 위해 더 많은 노력을 기울여야합니다.
— 톰 자흐
0

Vitaliy Silin의 답변을 바탕으로합니다 . 패딩을 원하지 않는 경우뿐만 아니라 표준 크기의 패딩이있는 경우도 포함합니다.

sassmeister.com에서이 코드를 CSS로 실시간 변환 한 내용을 확인하십시오. 

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

그런 다음 출력합니다.

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}
— 아드리안 베
소스
0

때로는 열에 원하는 패딩을 잃을 수도 있습니다. 그들은 서로 달라 붙게됩니다. 이를 방지하기 위해 다음과 같이 클래스를 업데이트 할 수 있습니다.

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

그리고 해당 클래스 :

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}
— 마헤 쉬
소스
0

SASS 파일로 부트 스트랩을 다운로드하면 열의 여백에 대한 설정이있는 구성 파일을 편집 한 후 저장할 수 있습니다. 이렇게하면 SASS가 열의 새 너비를 계산합니다

— 크레이지 교수
소스
0

Bootstrap Grid 시스템을 사용자 정의하고 사용자 정의 반응 형 그리드를 정의 할 수 있습니다.

다음 홈통 너비의 기본값을 @grid-gutter-width = 30px에서@grid-gutter-width = 0px

(거터 너비는 열 사이에 채워집니다. 왼쪽과 오른쪽에 절반으로 나뉩니다.)

— 라피 둘 이슬람
소스
0

나는 여전히이 CSS가 당신들에게 유용 할 수 있도록 모든 화면 크기의 모든 패딩을 제어하는 ​​것을 선호합니다 :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— 에릭 브로 벨
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.