Question

我正在尝试并排放置6个盒子。对于LG，我需要彼此相邻的6个盒子，然后是4个，然后是3个，然后是2个较小的设备。我需要所有的盒子宽度相同，并且始终适合容器内的100％。

不知道为什么我的下面代码不能正常工作。怎么解决？

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

public $timestamps = false;

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

首先，错过CSS规则中的点的拼写错误应为.box2

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

＆＃13;

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

＆＃13;

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

＆＃13;

并排响应定位6个盒子

2 个答案: