Question

这是一个非常简单的问题-但我无法通过阅读布尔玛文档来弄清楚。

我的布局如下：

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

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

Answer 1

布尔玛通过.textarea类来解决这个问题。

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

<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 容器中。
在以形式组合多个控件时，请使用.field类作为容器，以使间距保持一致。

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

如何使用布尔玛在列内垂直堆叠元素？

1 个答案: