Bootstrap4 表单示例呈现不正确

Question

我正在尝试构建一个像 Bootstrap 4 docs 中那样的简单电子邮件表单，但由于某种原因，格式错误。

示例如下所示：

但出于某种原因，这是它在我的项目中编译的结果：

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

Answer 1

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


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

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

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

和jQuery cdn

检查此 link 以获得实时预览

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 中:)

dolev146@gmail.com

Answer 2

您忘记了 link css 来自 bootstrap 的文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

复制粘贴到您的 html

的头部

另请阅读入门文档：bootstrap get started doc

Bootstrap4 表单示例呈现不正确

Bootstrap4 Form Example is Rendering Incorrectly

html

css

bootstrap-modal

vue.js

bootstrap-4