在 BootstrapVue 中将简单的表单控件左对齐

Question

我才刚刚开始使用 BootstrapVue，但尽管 their comprehensive documentation。

但我在理解布局系统方面遇到了一些困难

我的第一次尝试是创建一个带有三个复选框的简单表单。这是我目前所拥有的：

<template>
  <div>
    <h3>Headline</h3>
    <b-form class="p-3">
      <b-form-group>
        <b-form-checkbox>An option</b-form-checkbox>
      </b-form-group>
      <b-form-group>
        <b-form-checkbox>Another option</b-form-checkbox>
      </b-form-group>
      <b-form-group>
        <b-form-checkbox>A third option</b-form-checkbox>
      </b-form-group>
    </b-form>
  </div>
</template>

渲染如下图所示。如您所见，所有复选框都在屏幕上水平居中，占据了整个宽度。

我正在努力如何将元素（页眉和表单组件）对齐到屏幕左侧而不占用整个宽度。

Answer 1

如果我对问题的理解正确，您应该使用 bootstrap 网格系统，您可以在此处阅读更多内容 link：https://bootstrap-vue.org/docs/components/layout

我创建了一个简单的代码段来向您展示如何将表单移至左侧并在右侧添加另一个部分，并且您可以将其扩展到任何您想要的内容或事件以使其适合移动设备。

此外，您的代码段中的表单不应位于中心，我认为您在其他地方有一些 CSS 代码，因此，您会在中心看到您的表单。

new Vue({
  el: '#app'
})

.leftSection {
  background: lightgray;
}

.rightSection {
  background: cyan;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-container fluid>
    <b-row>
      <b-col cols="4" class="leftSection">
        <h3>Headline</h3>
        <b-form class="p-3">
          <b-form-group>
            <b-form-checkbox>An option</b-form-checkbox>
          </b-form-group>
          <b-form-group>
            <b-form-checkbox>Another option</b-form-checkbox>
          </b-form-group>
          <b-form-group>
            <b-form-checkbox>A third option</b-form-checkbox>
          </b-form-group>
        </b-form>
      </b-col>
      <b-col cols="8" class="rightSection">
        <h3>Dashboard</h3>
      </b-col>
    </b-row>
  </b-container>
</div>

在 BootstrapVue 中将简单的表单控件左对齐

Align simple form controls to the left in BootstrapVue

bootstrap-vue