【发布时间】：2021-03-09 14:57:12
【问题描述】：
我正在尝试构建一个简单的电子邮件表单，例如 Bootstrap 4 docs，但由于某种原因格式错误。
很明显，我的代码库/环境中有一些东西弄乱了布局。为什么我的字段不像示例那样位于单独的行中？为什么元素之间没有间距？为什么提交按钮不是蓝色的？一团糟。我的 bootstrap 4 依赖安装不正确吗？
我正在使用示例中的确切 html。代码如下。
<template>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// @ts-ignore
createApp(App).use(store).use(router).mount('#app')
【问题讨论】：
-
您可能需要将 CSS 导入到您的项目中。你能展示你的 main.js 吗？如果您还没有使用它，请查看BoostrapVue
-
用我的 main.ts 文件更新了我的帖子。我现在正在研究 BootstrapVue
-
现在，添加到 main.js：
import 'bootstrap';和import 'bootstrap/dist/css/bootstrap.min.css'; -
有 2 个导入，请确保同时使用。如果您决定使用
BootstrapVue，您还需要两者。 -
@Dan 很有趣，在项目中包含 Bootstrap4.5 的
main.ts文件的典型导入代码确实不适用于 Vue3，您必须使用您专门共享的 2 个导入bootstrap-vue.org 文档指出的内容。显然，Bootstrap 团队的目标是在 2020 年底之前通过 Bootstrap5 支持 Vue3。github.com/bootstrap-vue/bootstrap-vue/issues/5196
标签： html css vue.js bootstrap-4 bootstrap-modal