Question

我试图在每个人的旁边有6个盒子用于lg。那么4，然后是3，然后是2.我无法弄清楚如何为每个盒子制作宽度，而且我也无法理解为什么盒子之间的边距是如此之大，当我有4个盒子彼此相邻时，也就是当3个盒子和2个盒子时框。如何使这个代码最适合响应性，左/右边距总是可能是20px，盒子的宽度调整到屏幕尺寸（现在对于有两个盒子的小屏幕，盒子相互重叠）？我试过flexbox但对我不起作用。我想继续我已经启动的解决方案，如此处所示。感谢。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试使用类似这样的内容为您的css，百分比而不是固定的px 和vw而不是px或pt for font-size。

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

也许这会对你有所帮助

+------------------------+--------------+----------+----------+----------------+
|       UpdateDate       | Description  | NewValue | OldValue | CountPlusMinus |
+------------------------+--------------+----------+----------+----------------+
| 10/18/2016 09:41:55 AM | Create Donor | 48621    | NULL     |             -1 |
| 10/18/2016 09:41:55 AM | Create Donor | 48622    | NULL     |             -1 |
| 10/18/2016 09:41:55 AM | Create Donor | 48623    | NULL     |             -1 |
| 10/18/2016 09:40:40 AM | Merge Donors | NULL     | 48620    |              1 |
| 10/18/2016 09:40:37 AM | Merge Donors | NULL     | 48619    |              1 |
| 10/18/2016 09:40:37 AM | Create Donor | 48619    | NULL     |             -1 |
| 10/17/2016 10:13:44 AM | Web Donor Cr | 48618    | NULL     |             -1 |
+------------------------+--------------+----------+----------+----------------+

见下文

＆＃13;

.box2 {
    width: 100%;
}

＆＃13;

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

＆＃13;

Answer 3

这是你想要的结果吗？

＆＃13;

finally

＆＃13;

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

＆＃13;

Answer 4

首先，您应该在width: 100%上设置box，以便它占据整列宽度。您正在使用Bootstrap，以便在引导程序文件中定义列之间的空间，您可以更改here其名为@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>

将盒子彼此对齐并相应地对齐

4 个答案: