html - 在所有设备上具有全宽的并排框

Question

我需要并排显示容器内每个框的相同全宽 100% 的框，并跨越所有设备尺寸。 现在下面的工作，它显示了我所追求的，但是这个解决方案不适用于平板电脑和智能手机等实际物理设备，我不知道为什么，但是是否可以更改我的代码以便效果实际显示如何设计在物理设备上(而不只是在我的浏览器中并调整浏览器大小以查看效果)？

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

将.row的子div，也就是第三个div，的显示设置为flex，像这样:

.container > .row > div {
    display: flex;
}