如何在增加邊距時防止色譜柱在相互之間移動？

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