html - Bootstrap4 表单示例呈现不正确

Question

我正在尝试构建一个简单的电子邮件表单，例如Bootstrap 4 文档，但由于某种原因格式错误。

示例如下所示：

但由于某种原因，这就是它在我的项目中编译的内容：

显然，我的代码库/环境中有一些东西弄乱了布局。为什么我的字段不像示例那样位于单独的行中？为什么元素之间没有间距？为什么提交按钮不是蓝色的？一团糟。我的 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')

标签： htmlcssvue.jsbootstrap-4bootstrap-modal

Answer 1

如果您正在为静态网站或基本内容寻找一个简单的解决方案，您需要做的就是将此 cdn 添加到您的 html

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

这个引导 javascript cdn 用于下拉菜单和导航栏

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

和 jQuery CDN

检查此链接以进行实时预览

https://stackblitz.com/edit/web-platform-ss4nvu?file=script.js

基本上这个

    <link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

在头标签:)

但我看到你在寻找答案的标签中提到了 vue js，所以我也建议你去扔 vueJS bootstrap 的网站，如果你有任何问题，我也可以在 gmail 中找到它，这太棒了 :)

[e-mail]