6盒并排的响应定位

Question

我试着把6个盒子并列在一起。对于lg，我需要6个相邻的盒子，然后4个，然后3个，然后2个更小的设备。我需要所有的盒子是相同的宽度和适合始终充分100%内的容器。

不知道为什么我的下面的代码不能像我想的那样工作。怎么修？

​

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

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

<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-1-sm" title="1"><h1>1</h1></a>
<a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a>
<a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a>
<a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a>
<a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a>
<a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a>
			</div>
	</div>
</div>

​

Answer 1

首先，错误(遗漏了CSS规则中的点)应该是.box2。

其次，这些盒子不可能在任何时候都是100%宽的。下面我使用@media查询来根据可用的屏幕宽度设置它们的大小

​

.box2 {
  margin: 5px 5px 5px 0;
  text-align: center;
  float: left;
  background-color: #FFF;
  color: #000;
  border: 2px solid #A10000;
  height: auto;
  width: calc((100% / 2) - 5px);
  box-sizing: border-box;
  font-size: 12px;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .box2 {
    width: calc((100% / 3) - 5px);
  }
}
@media screen and (min-width: 992px) {
  .box2 {
    width: calc((100% / 6) - 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-xs-12 col-sm-12 col-md-12 col-lg-12">
      <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
      <a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a>
      <a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a>
      <a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a>
      <a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a>
      <a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a>
    </div>
  </div>
</div>

​

Answer 2

尝尝这个。这和你想要的一样吗？

​

<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-1-sm" title="1"><h1>1</h1></a>
            </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
        </div>



        </div>
    </div>
</div>

​