Question

我在页面上有以下布局：

@Entity
public class Element extends Model {

...

  @ManyToOne(cascade = CascadeType.ALL)
  private Element parentElement;

  @OneToMany(mappedBy="parentElement", cascade = CascadeType.ALL)
  private List<Criterion> elements = new ArrayList<>();

但是在较小的屏幕尺寸上，我想要以下布局：

<div class="col-sm-3 col-xs-6">1</div>
<div class="col-sm-3 col-xs-6">2</div>
<div class="col-sm-3 col-xs-6">3</div>
<div class="col-sm-3 col-xs-6">4</div>
<div class="col-sm-3 col-xs-6">5</div>
<div class="col-sm-3 col-xs-6">6</div>
<div class="col-sm-3 col-xs-6">7</div>
<div class="col-sm-3 col-xs-6">8</div>

 --------- ----- ----- ----- -
|    1    |  2  |  3  |  4   |
-------------------------------
|    5    |   6 |  7   |  8   |

我正在尝试的是：

------- ----- ---
|    1    |  2  |
----------------
|    5    |   6 |
 ----------------
|    3    |   4 |
-----------------
|    7    |   8 |

Answer 1

我认为您使用3和6的网格，因为您还有其他固定的项目。然后尝试创建两列并在列中放置元素

var test ="what, be inclined to, hi . hello\nwhere";
var elements = test.split(/[,\n.\s+]+/) || [];

Bootstrap 3：仅针对较小的屏幕设备推/拉列

1 个答案: