响应式表格设计

Question

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

​

​

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

​

​

在非常小的屏幕上：

​

​

有什么想法吗？我使用的是HTML5、CSS3、jQuery 3.3.1和bootstrap 2。

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>

​

Answer 2

我用flexbox解决了我的问题：

下面是我的CSS：

    .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .flex-container > div {
            margin: 1px;
        }

        .flex-container > .label {
            padding-left: 8px;
            width: 20%;
            min-width: 100px;
        }

        .flex-container > .value {
            vertical-align: middle;
        }

    .line-break {
        width: 100%;
    }

    .cond-line-break {
        width: 100%;
        display: none;
    }

    @media screen and (max-width: 720px) {
        .cond-line-break {
            display: inline;
        }
    }

    @media screen and (max-width: 360px) {
        .cond-line-break {
            display: inline;
        }

        .flex-container > .label {
            width: 100%;
        }
    }

和我的HTML：

<div class="flex-container">
    <div class="label">Property 1:</div>
    <div class="value">
        <select>
            <option selected="selected">Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
            <option>Value 4</option>
        </select>
    </div>
    <div class="cond-line-break"></div>
    <div class="label">Enter Property 2 here:</div>
    <div class="value">
        <select>
            <option>Value 1</option>
            <option selected="selected">Value 2</option>
            <option>Value 3</option>
            <option>Value 4</option>
        </select>
    </div>
    <div class="line-break"></div>
    <div class="label">Property 3:</div>
    <div class="value">
        <select>
            <option>Value 1</option>
            <option>Value 2</option>
            <option selected="selected">Value 3</option>
            <option>Value 4</option>
        </select>
    </div>
    <div class="cond-line-break"></div>
    <div class="label">Property 4:</div>
    <div class="value">
        <select>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
            <option selected="selected">Value 4</option>
        </select>
    </div>
</div>

即使标签的长度不同，它也能正常工作。