使用BootstrapVue

Question

我正在使用BootstrapVue构建具有两列的行。第一列具有文本，第二列具有b-form-textarea。我还希望文本（"data"）出现在文本区域的下一个。但是文本仅显示在文本区域下方。我认为是因为b-form-textarea的某些CSS属性。

这是我的fiddle

但是，当使用普通的textarea时，文本会显示在其旁边（请参见下面的小提琴/屏幕截图）。

我希望文本不仅位于文本区域旁边，而且垂直居中于文本区域一侧。

注意：：根据屏幕宽度在小提琴中查看时，两个文本都可能显示在底部。粘贴屏幕截图以避免混淆。

Answer 1

建议使用vue-bootstrap layouts来对齐元素，例如：

  <div class="col-4">
        <b-row align-v="center" >
        <b-col cols="10">
          <b-form-textarea></b-form-textarea>
        </b-col>
        <b-col cols="2"> <span> data </span></b-col>
      </b-row>
    </div>