將對齊方塊對齊並響應

Question

我正在嘗試在lg的每個方向旁邊放6個方框。然後4，然後3，然後2.我不知道如何使每個框的寬度，我也不明白爲什麼當我有4個盒子旁邊eachother方塊之間的邊緣是如此之大，也是3盒和2框。如何使這段代碼的響應性最佳，其中左/右邊距總是20px，並且框的寬度調整爲屏幕尺寸（現在用於2個盒子在一起的小屏幕，盒子重疊在一起）？我試過flexbox，但對我沒有任何作用。我想繼續我已經開始的解決方案，如圖所示。謝謝。

.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    width: 160px; 
 
    font-size: 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>

Answer 1

首先，你應該設置boxwidth: 100%所以需要列的全部寬度。您正在使用Bootstrap，以便在引導文件中定義列之間的空間，您可以更改它的名稱爲@grid-gutter-width的here並下載該引導程序文件。

.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    background-color: yellow; 
 
    color: #000; 
 
    display: inline-block; 
 
    border: 5px solid blue; 
 
    width: 100%; 
 
    font-size: 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container overview-sm"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
     <h1>Alpha</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
     <h1>Beta</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
     <h1>Gamma</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
     <h1>Delta</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
     <h1>Omega</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
     <h1>Pie</h1> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

嘗試使用這樣的事情對你的CSS，百分比，而不是固定的PX 和大衆，而不是PX或PT的字體大小。

.box2 { 
margin: 5% 5% 5% 0; 
text-align: center; 
float: left; 
background-color: yellow; 
color: #000; 
border: 5px solid blue; 
height: auto; 
width: 61%; 
font-size: 2.5vw; 

}

Answer 3

也許這將幫助你

.box2 { 
    width: 100%; 
} 

見下文

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    width: 100%; 
 
    font-size: 12px; 
 
}

<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>

Answer 4

EX是這個結果 你要？

.box2 { 
 
    margin: 5px 2px 2px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    font-size: 12px; 
 
    padding:5px 10px; 
 
}

<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>