我在这两个地方放置了相同的 html(使用 Bootstrap 4.5.2)。
- index.html
- App.vue
在 index.html 中,Bootstrap 风格有效。在 App.vue 中,按钮之间的空格失效。我通过添加类 mr-1
来解决这个问题到按钮。如何避免在将普通 Bootstrap 放入组件时修复它?
我试过的(结果相同)
将官方 BootstrapCDN 代码添加到
index.html
将此添加到
main.js
并安装模块import jQuery from "jquery"; global.jQuery = jQuery; let Bootstrap = require("bootstrap"); import "bootstrap/dist/css/bootstrap.css";
在
<style>
中添加了这个App.vue 部分@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
Momin的建议:
在项目文件夹目录中安装所有内容
npm install bootstrap jquery popper.js
将此添加到
main.js:
的顶部import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css'
最佳答案
如果您需要 Bootstrap,只需使用 BootsrapVue这为你做了繁重的工作。 如果您仍然愿意接受其他选择,Vuetifyjs是一个非常好的框架,可以提供很多东西。
关于javascript - 如何在 Vue 组件中使用 Bootstrap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63638434/