Bulma

Question

我有两列（一列带有 is-half class），我想在移动设备和平板电脑模式下 "stack"（一个在彼此之上）。

根据我使用的文档<div class="columns is-desktop"></div> 但它无法正常工作。在平板电脑上，列是堆叠的，但具有 is-half class 的第一列保持一半大小。

这里有一个片段来说明这个问题：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="container">
  <div class="columns is-desktop">
    <div class="column is-half">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

或者JSFiddle Example

我希望 is-half 列在平板电脑模式下为全角。

Answer 1

将 Class 名称 is-half 更改为 is-half-desktop

<div class="container">
      <div class="columns is-desktop">
        <div class="column is-half-desktop">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
        </div>
        <div class="column is-half-desktop">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
        </div>
      </div>
    </div>

https://jsfiddle.net/wtprmwsh/2/

Answer 2

不是错误。这就是 预期的 行为。

<div class="columns is-desktop"></div>

有 display: block 直到桌面

@media screen and (min-width:1024px){.columns.is-desktop{display:-webkit-box;display:-ms-flexbox;display:flex}}

.is-half 有 width: 50%

.column.is-half,.column.is-half-tablet{-webkit-box-flex:0;-ms-flex:none;flex:none;width:50%}

就像

div {
  border: 1px solid;
}

.half {
  width: 50%;
}

<div class="half">half</div>
<div>fullwidth</div>

在 768px 和 1024px 之间。

解决方案

(不要设置.is-half)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
  <div class="columns is-desktop">
    <div class="column">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

如果您想要其他尺寸，例如桌面，使用.is-x-desktop

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
  <div class="columns is-desktop">
    <div class="column is-8-desktop">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

Bulma - 列大小为一半仍适用于带有 is-desktop 的平板电脑模式 class

Bulma - Column size is-half still applied on tablet mode with the is-desktop class

html

css

解决方案