用 Bulma CSS 将 4 列分成 2 列

Question

我有这个代码 -

<div class="columns">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
    <div class="column">column 4</div>
</div>

我想和布尔玛一起做这个css - https://codepen.io/hashem/pen/ausJL

如果我调整大小（移动版），这些列会分成 2 列，而不是 4 列。

Answer 1

这应该可以解决您的问题：

 <div class="columns is-mobile is-multiline">
  <div class="column is-half-mobile">column 1</div>
  <div class="column is-half-mobile">column 2</div>
  <div class="column is-half-mobile">column 3</div>
  <div class="column is-half-mobile">column 4</div>
</div>

如果您希望尽可能多地容纳列并在屏幕尺寸变小时让它们换行，请使用此方法：

<div class="columns is-mobile is-multiline">
  <div class="column">column 1</div>
  <div class="column">column 2</div>
  <div class="column">column 3</div>
  <div class="column">column 4</div>
  <div class="column">column 5</div>
  <div class="column">column 6</div>
  <div class="column">column 7</div>
  <div class="column">column 8</div>
  <div class="column">column 9</div>
  <div class="column">column 10</div>
</div>

检查这些链接以获取有关您尝试执行的操作的更多信息。 https://bulma.io/documentation/columns/responsiveness/

https://bulma.io/documentation/columns/options/

用 Bulma CSS 将 4 列分成 2 列

Divide 4 column to 2 column with Bulma CSS

css

flexbox

bulma