ブートストラップで列間のスペースを追加するにはどうすればいいですか？
私はこの問題に対する簡単な解決策があると確信しています。基本的に、2つの列がある場合、どうすればそれらの間にスペースを追加できますか？
例えばHTMLが
<div class="col-md-6"></div>
<div class="col-md-6"></div>
出力は、単にページの全幅を占める2つの列を並べて表示します。幅が1000pxに設定されているとすると、各divは500pxの幅になります。
2つの間に100pxスペースが必要な場合は、どうすればこれを達成できますか？明らかにブートストラップを通してdivのサイズはスペースを補うためにそれぞれ450pxになります。
col-md-offset-*クラス、ここに文書化されている _を使用して列間のスペースを確保できます。すべての列が正しく並ぶように、間隔は一定です。間隔と列サイズを均等にするには、次のようにします。
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
私は同じ問題に直面していました。そして、以下は私にとってうまくいった。これが誰かがここに着陸するのを助けることを願っています：
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
これは自動的に2 div間のスペースをレンダリングします。
私はパーティーに遅刻していることを知っています、しかしあなたはパディングでボックスを間隔を空けてみることができます。
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS：
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
それを試してみる
列間のスペースについても同様の問題があります。根本的な問題は、ブートストラップ3と4の列がマージンではなくパディングを使用することです。そのため、隣接する2つの列の背景色が互いに接触します。
私たちの問題に合った解決策を見つけました、そしておそらく列をスペースを空けて、他のグリッドシステムと同じガター幅を維持しようとしているほとんどの人々のために働くでしょう。
これが私たちが目指していた最終結果でした
列間のドロップシャドウとのギャップを持つことは問題がありました。列間に余分なスペースを入れたくありませんでした。サイトの背景色が2つの白い列の間に表示されるように、溝を「透明」にしたいだけでした。
これは2列のマークアップです
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
このアプローチは、 "row"クラスのブートストラップが使用するのと同じように、負のマージンを持つ内側のdivを必要とします。そしてこのdivは、 "raised-block"と呼ばれ、列の直接の兄弟でなければなりません。
こうすればあなたはまだあなたのコラムの中の適切なパディングを得る。スペースを作成することでうまくいくように見える解決策を見たことがありますが、残念ながら、作成する列の行の両側に余分な余白があるため、グリッドレイアウト用に設計された行が細くなります。あなたが望んだ外観のために画像を見るならば、これは一緒に2つの列がグリッドの自然な構造を壊す一番上の1つより大きいものより小さくなることを意味するでしょう。
このアプローチの主な欠点は、各列のコンテンツをラップする余分なマークアップが必要なことです。私たちにとってこれはうまくいきます。特定の列だけが望みの外観を達成するためにそれらの間にスペースを必要としたからです。
これにより、2つの列の間にスペースができるようになり、明らかにデフォルトの幅を変更したい場合は、ミックスインでデフォルトのブートストラップ幅を変更することができます。または、インラインCSSスタイルを使用して幅を指定することもできます。
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
ブートストラップの.form-groupクラスを使用してください。あなたの場合はこのように：
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
境界クリップ付きの背景クリップとボックスモデルを使用できます
.box{
box-model: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
下記のcol-xs- * divの中で、col-xs- *クラスを使用して列間のスペースを確保できます。すべての列が正しく並ぶように、間隔は一定です。間隔と列サイズを均等にするには、次のようにします。
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
ブートストラップ4 、ファイルcustom.scssに以下のコードを追加できます。
$grid-Gutter-width-base: 20px;
$grid-Gutter-widths: ( xs: $grid-Gutter-width-base,
sm: $grid-Gutter-width-base,
md: $grid-Gutter-width-base,
lg: $grid-Gutter-width-base,
xl: $grid-Gutter-width-base
);
デフォルトでは$ grid-Gutter-width-base：30pxです。
Col-md-？の中に、別のdivを作成し、そのdivに画像を入れます。そうすることで簡単にパディングを追加できます。
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
3列でこれを行う方法を考え出す必要がありました。私はdivの隅を丸くしたいと思っていましたが、うまく動くように間隔が取れませんでした。私は余白を使いました。私の場合、画面の90％がdivで埋められ、10％が余白で埋められるように考えました。
html：
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
とCSS：
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
モバイルデバイス用に正しくサイズ変更するために、@media (max-width:1023px)の下でCSSに幅を30％からwidth:92.5%;に変更させました。
bootstrap を使っているので、 レスポンシブ にしたいと思います。その場合は、たとえば 'px'のように固定サイズを使用しないでください。
他の解決策の回避策として、両方の列を "col-md-6"ではなく "col-md-5"にしてから、列を含む親要素 "row"にクラス "justify-content"を追加するブートストラップdoc ここ でチェックできるように、これは空きスペースを真ん中にします。
この解決法は、もちろん "col-md-x"を調整する3つ以上の列に対しても有効です。
それが役に立てば幸い ;）
私は携帯電話で1列、タブレットの縦長で2列を必要とし、それらの間は等間隔で配置されていました（列内にグリッドを追加した余白もありません）。スペーシングユーティリティを使用してcol-mdの数字を省略することで実現できます。
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
<div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
</div>
</div>
私はこの記事が少し時代遅れであることを知っていますが、私はこれと同じ問題に遭遇しました。私のHTMLの例。
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
グループ間にスペースを作成するために、負のマージンを5減らすことによって、site.cssファイルでブートストラップのマージン-15pxを上書きしました。
これが私がしたことです...
.form-group {
margin-right: -10px;
}
これが他の人に役立つことを願っています。
Cssを使って背景と同じ色の境界線を追加するだけではどうでしょうか。私はこれに慣れていないので、多分理由があるかもしれません、しかし私がそれを試したときそれはよさそうです。
これは便利でしょう。
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>ボックスの右側の余白を増やしたり減らしたりしたい場合は、list-itemのmargin-rightプロパティを編集してください。
サンプル出力
簡単な方法
.row div{
padding-left: 8px;
padding-right: 8px;
}
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
これはデフォルトで外側のdivの内側にあなたが必要としているようにいくらかのパディングを提供します。さらに、カスタムCSSを使ってパディングを変更することもできます。
折り返し要素の周囲の白い枠線
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
そして最初の+最後の子にボーダーはありません
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
列間の間隔を特定の幅にするには、標準のブートストラップのレイアウトでpaddingを設定する必要があります。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}<div class="container-fluid space-100-px">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Left" alt="Left">
</div>
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Right" alt="Right">
</div>
</div>
</div> <div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
それは簡単です..あなたはcol- *に左、右の実線を追加する必要があり、それはうまくいくはずです.. :)
それはこのように見えます： http://i.stack.imgur.com/CF5ZV.png
HTML：
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS：
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
ブートストラップ4
ドキュメンテーションは言います（ ここ ）：
行は列のラッパーです。各列には、それらの間のスペースを制御するための水平方向の余白（ガターと呼ばれます）があります。この余白は負のマージンを持つ行では相殺されます。このようにして、あなたのコラムの中のすべてのコンテンツは視覚的に左下に揃えられます。
したがって、正しい答えは次のとおりです。colsのpadding-left/rightを、自分のrowのmargin-left/rightを引いたものに等しく設定します。それは簡単です。
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
デモ： https://codepen.io/frouo/pen/OqGaWN
ブートストラップ4-ネストされた行を使用して列を分離します。
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
Bootstrap 4 ドキュメント に従って、親には負のマージンmx-n*を、子には正のパディングpx-*を与える必要があります
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>