我有两列(一列带有 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
列在平板电脑模式下为全 Angular 。
最佳答案
这不是一个错误。这是预期的行为。
<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>
关于html - Bulma - 列大小为一半仍适用于具有 is-desktop 类的平板电脑模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47977919/