CSSマージンを増やすときに列同士が下に移動しないようにするにはどうすればよいですか?
.container{
text-align: center;
display: flex;
flex-direction: column;
}
.col-md-4 {
background-color: #1A1919;
margin: 5px;
}
HTML
<div class="container">
<div class="row">
<div class="col-md-4">1x1</div>
<div class="col-md-4">1x2</div>
<div class="col-md-4">1x3</div>
</div>
<div class="row">
<div class="col-md-4">2x1</div>
<div class="col-md-4">2x2</div>
<div class="col-md-4">2x3</div>
</div>
<div class="row">
<div class="col-md-4">3x1</div>
<div class="col-md-4">3x2</div>
<div class="col-md-4">3x3</div>
</div>
</div>
は、私は列と行の間のスペースの基本的な3×3のブートストラップグリッドを必要としています。しかし、私はそれをすることができません。マージンを使用するたびに、第3列は最初の列の下に移動し、3x3の方法で並べることはありません。なぜこれはうまくいくのですか?
彼らはギャップを持っていないだろういずれかの列の間で、あなたができることはそれらのオフセットを設定することです。しかし、レスポンスグリッドを探しているなら、私はCSSグリッドを利用するといいでしょう。あなたが探しているものに比べてはるかに簡単です。 –