我使用 bootstrap 創建了一個 3 x 3 列的 div，因此當我為該 div 添加 margin-left 和 margin-top 時，頁面大小會水平增加。我希望在我移動這些 div 時，頁面的大小保持不變。
。span class="hljs-selector-class">.col-4 {
background-color: black;
width: 100px;
height: 100px;
margin: 10px 0 0 10px。
}
.container {
margin: 100px 0 0 300px;
}<body>/span>
<div class="container">
<div class=" row">
<div class="col-4" id=" square_1"> </div>>
<div class="col-4" id=" square_2"> </div>>
<div class="col-4" id=" square_3"> </div>>
</div>/span>
<div class="row">
<div class="col-4" id=" square_4"> </div>>
<div class="col-4" id=" square_5"> </div>>
<div class="col-4" id=" square_6"> </div>>
</div>/span>
<div class="row">
<div class="col-4" id=" square_7"> </div>>
<div class="col-4" id=" square_8"> </div>>
<div class="col-4" id=" square_9"> </div>>
</div>/span>
</div>/span>
</body>/span>uj5u.com熱心網友回復：
到目前為止，無論我用你的代碼嘗試了什么，水平尺寸都沒有變化。然而，如果你能解釋一下你想實作的問題，我也許能幫助你。
uj5u.com熱心網友回復：
用flex system而不是行和列來處理盒子是更恰當的方法，這將為你提供更多的靈活性來處理盒子，避免默認的邊距和間距，并且將以簡單的方式保存你的容器寬度。
為了實作這一點，更新你的HTML代碼，如下 還有CSS，代碼如下 Enjoy！
標籤： 上一篇：為什么Chrome和Firefox的<inputtype="date">在en-GB語言環境中使用mm/dd/yyyy格式？
<div class="container">
<div class="d-flex"/span>>
<div class="col-4" id=" square_1"> </div>>
<div class="col-4" id=" square_2"> </div>>
<div class="col-4" id=" square_3"> </div>>
</div>/span>
<div class="d-flex">
<div class="col-4" id=" square_4"> </div>>
<div class="col-4" id=" square_5"> </div>>
<div class="col-4" id=" square_6"> </div>>
</div>/span>
<div class="d-flex">
<div class="col-4" id=" square_7"> </div>>
<div class="col-4" id=" square_8"> </div>>
<div class="col-4" id=" square_9"> </div>>
</div>/span>
</div>/span>
.col-4 {
background-color: black;
height: 100px;
margin: 10px 0 0;
flex: 0 0 32%;
}
.容器 {
margin: 100px 0 0 300px;
}
.container > *{
justify-content: space-between;
}