html - 响应式并排放置 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

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

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