如何使用 Bulma 垂直堆叠列内的元素？

Question

这是一个非常简单的问题 - 但我无法通过阅读 Bulma 文档弄明白。

我有以下布局：

<div class="columns is-mobile">
    <div class="column">
        <textarea></textarea>
        <button></button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

我希望 textarea 和 button 垂直堆叠而不是水平堆叠。我知道我可以使用 display: block 属性来实现正确的行为 - 但考虑到 Bulma 基于 flexbox，我认为有一种更好的方法可以使用基于 flexbox 的属性垂直对齐元素。我尝试在根元素中将 flex-direction 设置为 column，但没有用。

Answer 1

Bulma 通过 .textarea class 解决了这个问题。

基于布尔玛的解决方案：
在 textarea 标签中添加 .textarea class。

<div class="columns is-mobile">
    <div class="column">
        <textarea class="textarea"></textarea>
        <button>Click me</button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

选择：
将这些 CSS 属性添加到您的 textarea：

display:flex;
flex-direction:column;

一个好的做法是：
表单标签应该包裹在 .control container.
当在 form 中组合多个控件时，使用 .field class 作为 container，以保持间距一致。

<div class="field">
  <div class="control">
  <textarea class="textarea"></textarea>
  <button>Click me</button>
  </div>
</div>

如何使用 Bulma 垂直堆叠列内的元素？

How to vertically stack elements inside a column with Bulma?

css

bulma