マージンを増やすときに列同士が下に移動しないようにするにはどうすればよいですか？

Question

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の方法で並べることはありません。なぜこれはうまくいくのですか？

Answer 1

私はこの問題があなたのCSSだと思います。プロパティのフレックス方向が正しく設定されていません。

このフィドルをチェックし、あなたの質問に答えるかどうか教えてください。 https://jsfiddle.net/cqevhh2u/flex-direction: row;

Answer 2

Whenever I use the margin the 3rd column moves beneath the first oneブートストラップクラスcol-md-4あなたは余裕を与えてしまうとマージンのそれのために利用可能な33.3%幅は存在しませんので、三番目は、次の行に来るので33.3%としての幅を持っているので。代わりに別のdivをコンテンツに使用し、このように余裕を持たせます。

.container { 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.content { 
 
    background-color: #1A1919; 
 
    color: white; 
 
    padding: 5px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="content">1x1</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">1x2</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">1x3</div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="content">2x1</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">2x2</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">2x3</div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="content">3x1</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">3x2</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="content">3x3</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

ブートストラップ3は、雨どいのではなくマージンのためのパディングを使用するように切り替えます。したがって、コンテンツは分割されますが、ボックスは分割されません。セル内容をラップするには、内部要素を使用する必要があります。

.container { 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box1 { 
 
    background-color: #1A1919; 
 
    margin: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="box1">1x1</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box1">1x2</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box1">1x3</div> 
 
    </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>

Answer 4

CSSグリッドを使用してブートストラップレス溶液。あなたは3つの等しい列のグリッドに12列を分割する場合

.container { 
 
    text-align: center; 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    grid-template-rows: auto; 
 
} 
 
.row > div{ 
 
    background-color: gray; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div>1x1</div> 
 
    <div>1x2</div> 
 
    <div>1x3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div>2x1</div> 
 
    <div>2x2</div> 
 
    <div>2x3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div>3x1</div> 
 
    <div>3x2</div> 
 
    <div>3x3</div> 
 
    </div> 
 
</div>

Answer 5

示すように、あなたが列class.Doに余裕を使うべきではありません

...

.background { 
background-image: url("marakele-elephant1.jpg"); 
background-size: 100%; 
background-repeat: no-repeat; 
background-position-y: bottom; 
} 
html, body, .background { 
height: 100%; 
} 
.container{ 
text-align: center; 
display: flex; 
flex-direction: column; 
width: 698px; 
margin:auto; 
} 
.row{ 
width: 100%; 
margin: auto; 
} 
.col-md-4 { 
background-color: #D8C8C8; 
border-style: solid; 
border-width: 1px; 
width: 230px; 
height: 230px; 
}