如何对齐标签下面的按钮？

Question

我试着把‘搜索’按钮放在‘分支’标签下面，这是我的代码片段

​

<template>
  <base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
    <template>
      <div>
        <b-form inline>
          <label for="status">Status⠀⠀⠀ :</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <div class="branch">
            <div class="col-8 text-right">
              <b-form inline label-align-sm="right">
                <label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
                <div class="col-sm-2">
                  <b-form-input v-model="text"></b-form-input>
                </div>
                <div>
                  <b-button variant="outline-primary">Search</b-button>
                </div>
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <div>
        <b-form inline>
          <label for="storecode">Store Code:</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
        </b-form>
      </div>

​

这是最终的结果，谢谢你，current view，☺

Answer 1

发生这种情况的原因是因为您使用inline属性将其放入<b-form>中。

如果你把它放在表单外面，它应该放在下面。如果希望按钮提交表单，可以使用form属性来确定它的目标，该属性指向<b-form>的id。

<b-form inline id="my-form" label-align-sm="right">
  <label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
  <div class="col-sm-2">
    <b-form-input></b-form-input>
  </div>
</b-form>
<b-button type="submit" form="my-form" variant="outline-primary">Search</b-button>

另一种方法是使用Bootstrap网格系统，并将类col-12应用于包装<b-button>的div。

<b-form inline id="my-form" label-align-sm="right">
  <label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
  <div class="col-sm-2">
    <b-form-input></b-form-input>
  </div>
  <div class="col-12">
    <b-button variant="outline-primary">Search</b-button>
  </div>
</b-form>