Question

我希望有一个类似于css3多列的布局，其中列数：4的功能使布局流畅。我的布局如下：对于小型设备：

control1
control2
control3
control4

对于更大的设备:(查看订单）

control1  control3
control2  control4

然后我可以拥有超大屏幕

control1  control2  control3  control4

这样可以保持控件的顺序，这样如果我想使用现有的键（制表符索引），它就能完美运行。

请查看资源管理器如何使用css3

JS Fiddle

Answer 1

您可以使用网格系统权限定义所有这些：Here。定义屏幕大小：xs：extra-small，sm：small和md：对于medium，lg：for large。现在我刚刚决定使用sm：对于小型设备，lg用于您的情况下的超大屏幕，嵌套列

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control1</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control2</div>
  </div>
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control3</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control4</div>
  </div>
</div>

Answer 2

Pure css option here我不建议再使用表格标签，你可以用＆＃34; display：table＆＃34;更好地操纵表格。并根据需要将其更改为不同的视图。 tables without table

＆＃13;

.container {
  column-width: 280px;
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
}
@media (max-width: 800px) {
  .container {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
}
@media (max-width: 500px) {
  .container {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}

.table {
  display: table;
}

.table-row {
  display: block;
}

.table-cell {
  display: inline;
}

＆＃13;

<div class="container">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">Label1</div>
      <div class="table-cell">Editor1</div>
      <div class="table-cell">Description1</div>
    </div>
    <div  class="table-row">
      <div class="table-cell">Label2</div>
      <div class="table-cell">Editor2</div>
      <div class="table-cell">Description2</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label3</div>
      <div class="table-cell">Editor3</div>
      <div class="table-cell">Description3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

对于那些像我一样在此页面上徘徊的人，您可能会发现column-width会起作用。

<div style="column-width: 250px;">
    <div>Control 1</div>
    <div>Control 2</div>
    <div>Control 3</div>
    <div>Control 4</div>
</div>

Answer 4

网格布局将解决您的问题

@keyframes pulsing {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.element {
  animation: pulsing 1000ms ease-out;
}

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))">
    <div>Control 1</div>
    <div>Control 2</div>
    <div>Control 3</div>
    <div>Control 4</div>
    <div>Control 5</div>
    <div>Control 6</div>
    <div>Control 7</div>
    <div>Control 8</div>
</div>

Css3多列，在Bootstrap中具有列数

4 个答案: