html - 响应式表格设计

Question

在表单中，用户必须设置四个属性。我选择了一个类似布局的表格：

然而，这种布局在较小的屏幕上会产生问题。在这种情况下，我想要：

在非常小的屏幕上：

任何想法？我正在使用 HTML5、CSS3、jQuery 3.3.1 和 bootstrap 2。

标签： htmlhtml-tableresponsive-design

Answer 1

如果我理解正确，您打算使用表格使您的表格保持良好的布局。不推荐这种方式，因为您不能自由地重新排列表格中的单元格。或者我应该说，不要使用表格来制作响应式布局。

Bootstrap 网格系统默认是响应式的，所以你应该使用它。 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

在您的情况下，您可以像这样将元素放在四个 div 标签中

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-3">
      <!-- your first element -->
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-3">
      <!-- your second element -->
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-3">
      <!-- your third element -->
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-3">
      <!-- your fourth element -->
    </div>
  </div>
</div>