将盒子彼此对齐并作出相应的响应

I am trying to have 6 boxes next to eachoter for lg. Then 4, then 3, then 2. I cannot figure out how to make the width for each box and also I cannot understand why the margins between the boxes are so big when I have 4 boxes next to eachother, also when 3 boxes and 2 boxes. How to make this code optimal for responsiveness where the left/right margins are always maybe 20px and the width of the box adjusts to the screen dimensions (now for small screens with 2 boxes together, the boxes overlap into eachother)? I tried flexbox but doesnot work for me. I would like to continue on the solution I have initiated as shown here already. Thanks.

我试着在lg的每个choter旁边放6个盒子。然后是4 3 2。我不知道如何为每个盒子做宽度，我也不能理解为什么盒子之间的边距如此之大，当我有4个盒子挨着彼此的时候，还有3个盒子和2个盒子。如何使这段代码最适合于响应性，因为左/右的边距可能是20px，框的宽度调整到屏幕的尺寸(现在对于两个盒子在一起的小屏幕，盒子重叠在一起)?我试过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>
			</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>

4 个解决方案

#1

First you should set width: 100% on box so it takes full width of column. You are using Bootstrap so that space between columns is defined in bootstrap file and you can change that here its called @grid-gutter-width and download that bootstrap file.

首先你应该设置宽度:100%在框上，所以它需要全栏宽度。您正在使用Bootstrap，以便在引导文件中定义列之间的空间，您可以在这里更改它的名为@grid-gutter-width，并下载该引导文件。

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

#2

Try using something like this for your css, percentages instead of fixed px and vw instead of px or pt for font-size.

试着用类似这样的东西为你的css，百分比代替固定的px和vw而不是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;

}

}

#3

maybe this will help you

也许这对你有帮助

.box2 {
    width: 100%;
}

see ex below

请参见下面的例

@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>
			</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>

#4

Is this result you want?

这是你想要的结果吗?

.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>
			</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>