반응형
부트스트랩 3의 열에서 패딩 제거
문제:
Bootstrap 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%로 확장되지만 두 열이 서로 옆에 있기를 바랍니다.
일반적으로 두 개의 열을 랩핑하는 데 사용합니다..col-md-12그것은 다른 열을 둘러싸는 열입니다.결국, 추가 마진과 패딩이 없기 때문에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;
}
부트스트랩 4에 .no-gutters 클래스가 추가되었습니다.
부트스트랩 3.4에 .row-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;
}
}
}
소형 장치를 위쪽으로 지원하려면 미디어 조회의 최대 너비 부분을 제거할 수 있습니다.
열의 패딩만 줄이면 페이지 너비가 늘어나 페이지의 나머지 부분과 균일하지 않게 되므로 유용하지 않습니다.라고 navbar가 말합니다.행의 마이너스 마진을 똑같이 줄여야 합니다.@martinedwards의 적은 예를 들어보겠습니다.
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
이후에는 부트스트랩 4에서만 사용 가능
<div class="p-0 m-0">
</div>
참고: .p-0 및 .m-0이 이미 bootstrap.dll을 추가했습니다.
특히 SAS 혼합의 경우:
@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
물론, 필요한 선언만 @포함할 수 있습니다.
부트스트랩 3에 내장된 클래스인 "패딩 없음"을 간단히 추가합니다.
부트스트랩 4에는 이를 위한 네이티브 클래스가 있습니다. 클래스 추가.no-gutters.row
LESS 소스에서 부트스트랩을 컴파일하는 경우에만 실행 가능한 또 다른 해결책은 열 패딩을 설정하는 변수를 재정의하는 것입니다.
는 변는다확수있다니에서 찾을 수 .variables.less파일를을:을를▁called)▁file('s:(파)@grid-gutter-width.
출처에는 다음과 같이 설명되어 있습니다.
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
하고, 0을 컴파일합니다.bootstrap.less 결과적으로 된 리고결포함니다합를을 합니다.bootstrap.css만약 소스를 , 규칙을 이 될 수 .나처럼 부트스트랩 소스를 이미 사용하고 있는 경우 추가 규칙을 정의하는 대신 사용할 수 있습니다.
부트스트랩 4에는 행 요소에 추가할 수 있는 클래스 .no-gutters가 있습니다.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12">
[YOUR CONTENT HERE]
</div>
</div>
</div>
참조 자료: http://getbootstrap.com/docs/4.0/layout/grid/ #grid-delays
버전 3.4.0 이후 부트스트랩 3에는 패딩을 제거하는 공식적인 방법이 있습니다: 클래스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>
[class*="col-"]
padding: 0
margin: 0
위의 어떤 해결책도 저에게 완벽하게 효과가 없었습니다.이 대답을 듣고 저는 저에게 맞는 무언가를 만들 수 있었습니다.여기서는 미디어 쿼리를 사용하여 작은 화면으로만 제한합니다.
@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;
}
}
부트스트랩 3.7.7 이하를 사용하여 b/w 열에서 간격을 제거합니다.
.no-gutter는 행 DIV에 추가할 수 있는 사용자 지정 클래스입니다.
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
<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의 홈통과 행에 대한 좋은 설명입니다.
그냥 사용하는 게 더 편할 것 같아요.
margin:-30px;
부트스트랩에서 설정한 원래 값을 재정의합니다.
해봤습니다
margin: 0px -30px 0px -30px;
그리고 그것은 저에게 효과가 있었습니다.
열을 .row로 묶고 "no-gutter"라는 클래스를 해당 div에 추가합니다.
<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;
}
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>여백 제거를 위한 새 클래스를 만들 수 있으며 추가 여백을 제거할 요소에 적용할 수 있습니다.
.margL0 { margin-left:0 !important }
!important : 기본 마진을 제거하거나 현재 마진 값을 덮어쓰는 데 도움이 됩니다.
그리고 왼쪽에서 여백을 제거하려는 디브에 적용합니다.
<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>
다음과 같이 여유도와 열의 패딩을 관리하기 위해 부트스트랩을 사용하여 더 적은 믹스인을 만들 수 있습니다.
http://mohandere.work/less-mixins-for-for-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
비탈리 실린의 대답을 기반으로 합니다.패딩을 전혀 원하지 않는 경우뿐만 아니라 표준 사이즈 패딩이 있는 경우도 커버합니다.
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;
}
때때로 열에 대해 원하는 패딩을 잃을 수 있습니다.그들은 결국 서로에게 달라붙게 됩니다.이를 방지하기 위해 다음과 같이 클래스를 업데이트할 수 있습니다.
<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;
}
SAS 파일과 함께 부트스트랩을 다운로드하면 열 여백에 대한 설정이 있는 구성 파일을 편집한 후 저장할 수 있습니다. 그런 방식으로 SAS가 열의 새 너비를 계산합니다.
부트스트랩 그리드 시스템을 사용자 지정하고 사용자 지정 응답 그리드를 정의할 수 있습니다.
다음 홈통 너비에 대한 기본값 변경@grid-gutter-width = 30px로.@grid-gutter-width = 0px
거터 너비는 열 사이의 채우기입니다.왼쪽과 오른쪽으로 반으로 나뉩니다.)
저는 여전히 모든 화면 크기의 모든 패딩을 제어하여 이 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;}
}
포크를 사용할 수 있습니다.
gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"
언급URL : https://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3
반응형
'source' 카테고리의 다른 글
| Oracle ID 열 및 선택 항목에 삽입 (0) | 2023.07.31 |
|---|---|
| bind 또는 click으로 이벤트 핸들러를 링크에 바인딩하지 않은 경우 jQuery의 click()을 호출하여 링크를 팔로우할 수 있습니까? (0) | 2023.07.31 |
| node.js가 설치되었는지 여부를 확인하는 방법 (0) | 2023.07.31 |
| 슈퍼 사용법 정확함(잘못된 패싱) (0) | 2023.07.31 |
| 오류: 'keytool'이(가) 내부 또는 외부 명령, 작동 가능한 프로그램 또는 배치 파일로 인식되지 않습니다. (0) | 2023.07.31 |