デフォルトの Bootstrap グリッド システムは、以下のように各スパンに30pxガターを持つ 12 列を使用します。ガターは、列間の余白です。ガター幅は～の間のよう20pxです30px。ここにあるとしましょう30px。
div行にガター スペースがないように、特定の のガター スペースを削除したい。各スパンはガターなしで隣り合っています。
30px問題は、マージン(ガター)を削除すると、行の最後に360px(12 * ) が残ることです。30px
特定のガタースペースdivのみを削除したい場合。divにある s用であると仮定しましょうmain_content div。
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
divBootstrap の応答性を失うことなく、行の最後にスペースを残さずに、特定のガターを削除するにはどうすればよいですか?
ブートストラップ 5 (2021 年更新)
Bootstrap 5 には、行全体のガターを調整するために特別に設計された新しいガター クラスがあります。ガター クラスは、ブレークポイントごとにレスポンシブに使用できます (例: gx-sm-4)
g-0で使用g-(1-5)間隔単位を介して水平および垂直ガターを調整するために使用しますgy-*縦溝の調整に使用gx-*水平ガターの調整に使用Bootstrap 4 (追加の CSS は不要)
Bootstrap 4 にはno-gutters、全体に適用できるクラスが含まれていrowます。
http://codeply.com/go/pVsGQZVVtG
<div class="row no-gutters">
<div class="col">..</div>
<div class="col">..</div>
<div class="col">..</div>
</div>
また、パディング/マージンの制御を可能にする新しいスペーシング ユーティリティもあります。したがって、これを使用して、列の単一の列 (つまり:)<div class="col-3 pl-0"></div>セットのパディング (ガター) を変更したり、左右のパディング (x 軸) の両方を削除しpadding-left:0;たりすることができます。px-0
ブートストラップ 3 (元の回答)
Bootstrap 3の場合、はるかに簡単です。Bootstrap 3 は、マージンの代わりにパディングを使用して「ガター」を作成するようになりました。
.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;
}
次に、間隔を削除する行に追加no-gutterします。
<div class="row no-gutter">
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
</div>
Bootstrap 3.0 以降については、この回答を参照してください
ここではクラス.span1(幅 12 のグリッドの 1 列) のみを見ていますが、以下から左マージンを削除することで目的を達成できます。
.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive
次に、.row-fluid .span1の幅を 100% を 12 列 (8.3333%) で割った値に変更します。
.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive
ベース グリッド システムをそのままにしておくことができるクラスを追加することで、これを行うことができます。
.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }
<div class="row-fluid show-grid">
<div class="span1NoGutter">1</div>
</div>
他のすべての列についても、このパターンを繰り返すことができます。
.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }
* 編集 (デフォルト グリッドの使用を主張)
デフォルト グリッド システムが要件である場合、デフォルトで幅 940px (.container および .span12 クラス) になります。したがって、最も簡単に言えば、940 を 12 で割ります。これは、幅 78.33333 ピクセルの 12 個のコンテナーに相当します。
したがって、bootstrap.css の 339 行目は次のように編集できます。
.span1 { width:78.33333px; margin-left:0 }
or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)
全体の幅は、要素の幅にマージン スペースの幅を加えたもので計算されます。マージンスペースを削除したい場合は問題ありませんが、前述のギャップを回避するには、列の幅も増やす必要があります.
この場合、1 つの列の幅を、削除されたマージン スペース (30 ピクセル) だけ増やす必要があります。
したがって、列の幅が通常 50PX で、マージン スペースが 30PX であるとします。マージンスペースを削除し、幅を 80PX にします。
パディングとマージンを削除する最も簡単な方法は、単純な css を使用することです。
<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
面白い...
Twitter Bootstrap のデフォルト グリッド (幅 940px) のガターを削除します。デフォルトのグリッドには幅 940 ピクセルのコンテナーがあり、スタイルシートに bootstrap-responsive.css があります。
あなたの質問が正しければ、これが私がやった方法です...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stackoverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
@media (min-width: 768px) and (max-width: 979px) {
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
}
@media (max-width: 767px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 480px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
<!-- For Visual Aid Only -->
.bg1 {
background-color: #C2C2C2;
}
.bg2 {
background-color: #D2D2D2;
}
</style>
<body>
<div id="wrap">
<div class="container">
<div class="row-fluid">
<div class="span1 text-center bg1">01</div>
<div class="span1 text-center bg2">02</div>
<div class="span1 text-center bg1">03</div>
<div class="span1 text-center bg2">04</div>
<div class="span1 text-center bg1">05</div>
<div class="span1 text-center bg2">06</div>
<div class="span1 text-center bg1">07</div>
<div class="span1 text-center bg2">08</div>
<div class="span1 text-center bg1">09</div>
<div class="span1 text-center bg2">10</div>
<div class="span1 text-center bg1">11</div>
<div class="span1 text-center bg2">12</div>
</div>
<div id="main_content">
<div class="row-fluid">
<div class="span3 text-center bg1">1</div>
<div class="span3 text-center bg2">2</div>
<div class="span3 text-center bg1">3</div>
<div class="span3 text-center bg2">4</div>
</div>
</div>
</div><!--/container-->
</div>
</body>
</html>
そして結果は..
ガターのない 4 div スパンは、小型タブレットの横長 (800x600) のスパンのままになります。それより小さいサイズの場合、4 つの div が折りたたまれ、垂直に積み上げられます。もちろん、ニーズに合わせて微調整する必要があります。
面白い...
Twitter Bootstrap のデフォルト グリッドのガターを削除すると、100% 機能します。gxの形式で動作する行でg-0クラスを使用します。
<div class="row g-0">
<div class="col-md-2 col-sm-4">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-1" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-2" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-3" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-4" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
<header>
Rocket/Missile
</header>
<div class="product-serice-img-5" ></div>
</div>
</div>
<div class="col-md-2 col-sm-4 ">
<div class="service-product-type">
`enter code here`
<header>
Rocket/Missile
</header>
<div class="product-serice-img-6" ></div>
</div>
</div>