Question

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

但是，这种布局在较小的屏幕上会出现问题。在这种情况下，我想拥有：

在非常小的屏幕上：

有什么主意吗？我正在使用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>

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

响应式表格设计

2 个答案: