Question

我有两个列（一个is-half类），我希望在移动和平板电脑模式下“堆叠”（一个在另一个之上）。

从我使用的文档<div class="columns is-desktop"></div>开始但它无法正常工作..在平板电脑上，列是堆叠的，但第一列有一个is-half类，仍然是一半。

以下是解释此问题的摘要：

<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

将班级名称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>

有<{1}}，直到桌面

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

Bulma - 使用is-desktop类在平板电脑模式下仍然应用了列大小的一半

2 个答案:

解决方案