如何在增加边距时防止色谱柱在相互之间移动？

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> 

我需要的列和行之间的空间基本3x3的引导电网。但我无法做到。每当我使用边界时，第三列在第一列下方移动，它们不以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电网A自举少溶液。

.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; 
}