引导列不会水平对齐



我试图添加一些Bootstrap元素到我的投资组合后的事实,我遇到了一些问题。到目前为止,我唯一添加的专栏是在"欢迎"部分的顶部。行40-52。它们不会水平对齐。我看到的一切故障排除似乎很容易,但尝试不同的容器,行,大小,排水沟和样式等没有给我任何结果。

可能是我的style.css文件中的一个元素导致列不对齐吗?如果是这样,你能看到这个问题吗?我总是很难用新代码来更新网站。

我真的很感谢你的帮助。我被难住了!

* {
margin: 0;
}
html, body {
margin: 0;
font-family: roboto;
scroll-behavior: smooth;
}
/* nav*/
/* sections */
#welcome-section {
min-width: 100vw;
min-height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
}
#hi {
padding-left: 5vw;
font-size: 200vh;
font-size: 12vw;
padding-bottom: 4%;
padding-top: 4vh;
margin: auto;
line-height: 0.9em;
color: white;
}
#job-title {
padding-left: 5vw;
font-size: min(3vw, 36px);
font-style: italic;
line-height: 0.9em;
color: white;
}
#projects {
background-color: #344966;
min-height: 100vh;
}
.projects-section-header {
color: white;
font-size: 40px;
padding: 5%;
text-align: center;
margin: 0 auto;
}
#contact {
background-color: #6D9DC5;
min-height: 100vh;
}
#welcome-section {
background: linear-gradient(92deg, #2e3192, #1bffff);
background-size: 400% 400%;
-webkit-animation: bluegradient 59s ease infinite;
-moz-animation: bluegradient 59s ease infinite;
animation: bluegradient 59s ease infinite;
}
@-webkit-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
/*  
1. Tesla Product Page
https://codepen.io/darkstar93/pen/MWrEErN
2. Tribute Page
https://codepen.io/darkstar93/pen/rNpzdzG
3. Street Fighter jQuery
http://darkstar93.github.io/jquery-streetfighter/main.html
4. Warcraft Quiz App
http://darkstar93.github.io/quiz/
5. Instagram API Hack
http://darkstar93.github.io/instagramapihack/
6. Input Survey Form
https://codepen.io/darkstar93/pen/rNpwROz
*/
/* Custom properties/variables  */
:root {
--main-white: #f0f0f0;
--main-red: #be3144;
--main-blue: #8797B2;
--main-gray: #000807;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*, *::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */
body {
font-family: 'roboto', sans-serif;
font-size: 1.8rem;
/* 18px */
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}
/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
var(--main-white);
}
@media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
padding: 28px;
}
@media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 25px;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
border-radius: 25px;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
text-align: center;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(--main-red);
}
.btn-show-all:hover>i {
transform: translateX(2px);
}
.btn-show-all>i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
@media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
/*blinking */
.blinking-cursor {
font-weight: 100;
font-size: 50px;
color: white;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
.contact-links {
text-align: center;
width: 100%;
max-width: 100%;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 3rem;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
color: black;
}
i {
color: white;
}
#work {
text-align: center;
margin: 0 auto;
padding: 50px;
}

.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
}
@media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background: var(--main-blue);
}
<!DOCTYPE html>
<html>
<head>
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
<title></title>

</head>
<body>
<div class="background">
<nav class="nav" id="navbar">
<ul class="nav-list">
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>


</nav>
<section id="welcome-section">
<div class="container-fluid"
<div class="row justify-content-start" id="name">
<div class="col-sm-6" style="background-color: rgb(136, 84, 20);">
<h1 id="hi">Hi<br>
I am<br>
Thomas</h1>
</div>
<div class="row">
<div class="col-sm-4 justify-content-end" style="background-color: rgb(114, 114, 114);"><p>I'm highly motivated and passionate about development and creative design. I challenge myself every day to be a little better and increase my skills. </p></div>
</div>
</div>
</div>
<h1 id="job-title"></h1>
</section>
<section class="projects-section" id="projects">
<h2 class="projects-section-header">My Projects</h2>
<div class="projects-grid">
<a class="project project-tile" href="https://codepen.io/darkstar93/pen/rNpzdzG" target="_blank"><img alt="project" class="project-image" src="https://i.imgur.com/zynvp2S.jpg">
<p class="project-title"><span class="code">&lt;</span> Tribute Page <span class="code">&#47;&gt;</span></p></a> <a class="project project-tile" href="https://codepen.io/darkstar93/pen/MWrEErN" target="_blank"><img alt="project" class="project-image" src="https://i.imgur.com/aDt3B1M.jpg">
<p class="project-title"><span class="code">&lt;</span> Tesla Product Page <span class="code">&#47;&gt;</span></p></a> <a class="project project-tile" href="http://darkstar93.github.io/jquery-streetfighter/main.html" target="_blank"><img alt="project" class="project-image" src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/ryu.png?raw=true">
<p class="project-title"><span class="code">&lt;</span> Street Fighter <span class="code">&#47;&gt;</span></p></a> <a class="project project-tile" href="http://darkstar93.github.io/stackerAJAX/" target="_blank"><img alt="project" class="project-image" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4e990e20126391.58b02ab778b00.jpg">
<p class="project-title"><span class="code">&lt;</span> Stack Overflow Reputation Builder <span class="code">&#47;&gt;</span></p></a> <a class="project project-tile" href="http://darkstar93.github.io/Warcraft-Quiz/" target="_blank"><img alt="project" class="project-image" src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/quiz.jpg?raw=true">
<p class="project-title"><span class="code">&lt;</span> Warcraft Quiz App <span class="code">&#47;&gt;</span></p></a> <a class="project project-tile" href="https://codepen.io/darkstar93/pen/yLvzWNN" target="_blank"><img alt="project" class="project-image" src="https://images.unsplash.com/photo-1485988412941-77a35537dae4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1196&q=80">
<p class="project-title"><span class="code">&lt;</span> Digital Resume <span class="code">&#47;&gt;</span></p></a>
</div>
</section>
<section id="contact">
<div id="contact-header">
<h1 id="work">Lets Work Together...</h1>
</div>
<div class="contact-links">
<a class="btn contact-details" href="https://www.linkedin.com/in/turekhomes/" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a> <a class="btn contact-details" href="https://github.com/Darkstar93" id="profile-link" target="_blank"><i class="fab fa-github"></i> GitHub</a> <a class="btn contact-details" href="https://codepen.io/darkstar93" target="_blank"><i class="fab fa-codepen"></i> CodePen</a> <a class="btn contact-details" href="mailto:thomasturek93@gmail.com"><i class="fas fa-at"></i> Email</a> <a class="btn contact-details" href="tel:801-885-6352"><i class="fas fa-mobile-alt"></i> Call/Text Me</a>
</div>
</section>

</div>
</body>
</html>

在您的代码片段中,#namerowdiv中的直接子列div,您已经在此#name行中启动了一个新的子行元素。

您不应该在另一个row元素中开始子行。

题应该.row祝辞.col祝辞.row祝辞.col等等…

永远不要这样做….row祝辞.row祝辞.col……这只会输出意想不到的结果🤔

经验…行只能嵌套子列,列和其他块元素可以嵌套行👍🏼

希望这能让你走上正确的轨道🙌🏼

* {
margin: 0;
}
html,
body {
margin: 0;
font-family: roboto;
scroll-behavior: smooth;
}

/* nav*/

/* sections */
#welcome-section {
min-width: 100vw;
min-height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
}
#hi {
padding-left: 5vw;
font-size: 200vh;
font-size: 12vw;
padding-bottom: 4%;
padding-top: 4vh;
margin: auto;
line-height: 0.9em;
color: white;
}
#job-title {
padding-left: 5vw;
font-size: min(3vw, 36px);
font-style: italic;
line-height: 0.9em;
color: white;
}
#projects {
background-color: #344966;
min-height: 100vh;
}
.projects-section-header {
color: white;
font-size: 40px;
padding: 5%;
text-align: center;
margin: 0 auto;
}
#contact {
background-color: #6D9DC5;
min-height: 100vh;
}
#welcome-section {
background: linear-gradient(92deg, #2e3192, #1bffff);
background-size: 400% 400%;
-webkit-animation: bluegradient 59s ease infinite;
-moz-animation: bluegradient 59s ease infinite;
animation: bluegradient 59s ease infinite;
}
@-webkit-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}
@keyframes bluegradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 51%
}
100% {
background-position: 0% 50%
}
}

/*  
1. Tesla Product Page
https://codepen.io/darkstar93/pen/MWrEErN
2. Tribute Page
https://codepen.io/darkstar93/pen/rNpzdzG
3. Street Fighter jQuery
http://darkstar93.github.io/jquery-streetfighter/main.html
4. Warcraft Quiz App
http://darkstar93.github.io/quiz/
5. Instagram API Hack
http://darkstar93.github.io/instagramapihack/
6. Input Survey Form
https://codepen.io/darkstar93/pen/rNpwROz
*/

/* Custom properties/variables  */
:root {
--main-white: #f0f0f0;
--main-red: #be3144;
--main-blue: #8797B2;
--main-gray: #000807;
}

/* Base reset */
* {
margin: 0;
padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}

/* Base styles */
body {
font-family: 'roboto', sans-serif;
font-size: 1.8rem;
/* 18px */
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}

/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
var(--main-white);
}
@media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
padding: 28px;
}
@media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 25px;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
border-radius: 25px;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
text-align: center;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(--main-red);
}
.btn-show-all:hover>i {
transform: translateX(2px);
}
.btn-show-all>i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
@media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}

/*blinking */
.blinking-cursor {
font-weight: 100;
font-size: 50px;
color: white;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: white;
}
}
@-moz-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
.contact-links {
text-align: center;
width: 100%;
max-width: 100%;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 3rem;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
color: black;
}
i {
color: white;
}
#work {
text-align: center;
margin: 0 auto;
padding: 50px;
}
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
}
@media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background: var(--main-blue);
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
<nav class="nav" id="navbar">
<ul class="nav-list">
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<div class="container-fluid">
<div class="row justify-content-start" id="name">
<div class="col-sm-6" style="background-color: rgb(136, 84, 20);">
<h1 id="hi">Hi<br> I am<br> Thomas
</h1>
</div>
<div class="col-sm-4 justify-content-end" style="background-color: rgb(114, 114, 114);">
<p>I'm highly motivated and passionate about development and creative design. I challenge myself every day to be a little better and increase my skills. </p>
</div>
</div>
</div>
<h1 id="job-title"></h1>
</section>
<section class="projects-section" id="projects">
<h2 class="projects-section-header">My Projects</h2>
<div class="projects-grid">
<a class="project project-tile" href="https://codepen.io/darkstar93/pen/rNpzdzG" target="_blank"><img alt="project" class="project-image" src="https://i.imgur.com/zynvp2S.jpg">
<p class="project-title"><span class="code">&lt;</span> Tribute Page <span class="code">&#47;&gt;</span></p>
</a>
<a class="project project-tile" href="https://codepen.io/darkstar93/pen/MWrEErN" target="_blank"><img alt="project" class="project-image" src="https://i.imgur.com/aDt3B1M.jpg">
<p class="project-title"><span class="code">&lt;</span> Tesla Product Page <span class="code">&#47;&gt;</span></p>
</a>
<a class="project project-tile" href="http://darkstar93.github.io/jquery-streetfighter/main.html" target="_blank"><img alt="project" class="project-image" src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/ryu.png?raw=true">
<p class="project-title"><span class="code">&lt;</span> Street Fighter <span class="code">&#47;&gt;</span></p>
</a>
<a class="project project-tile" href="http://darkstar93.github.io/stackerAJAX/" target="_blank"><img alt="project" class="project-image" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4e990e20126391.58b02ab778b00.jpg">
<p class="project-title"><span class="code">&lt;</span> Stack Overflow Reputation Builder <span class="code">&#47;&gt;</span></p>
</a>
<a class="project project-tile" href="http://darkstar93.github.io/Warcraft-Quiz/" target="_blank"><img alt="project" class="project-image" src="https://github.com/Darkstar93/thomas-turek-portfolio/blob/master/images/quiz.jpg?raw=true">
<p class="project-title"><span class="code">&lt;</span> Warcraft Quiz App <span class="code">&#47;&gt;</span></p>
</a>
<a class="project project-tile" href="https://codepen.io/darkstar93/pen/yLvzWNN" target="_blank"><img alt="project" class="project-image" src="https://images.unsplash.com/photo-1485988412941-77a35537dae4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1196&q=80">
<p class="project-title"><span class="code">&lt;</span> Digital Resume <span class="code">&#47;&gt;</span></p>
</a>
</div>
</section>
<section id="contact">
<div id="contact-header">
<h1 id="work">Lets Work Together...</h1>
</div>
<div class="contact-links">
<a class="btn contact-details" href="https://www.linkedin.com/in/turekhomes/" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a class="btn contact-details" href="https://github.com/Darkstar93" id="profile-link" target="_blank"><i class="fab fa-github"></i> GitHub</a>
<a class="btn contact-details" href="https://codepen.io/darkstar93" target="_blank"><i class="fab fa-codepen"></i> CodePen</a>
<a class="btn contact-details" href="mailto:thomasturek93@gmail.com"><i class="fas fa-at"></i> Email</a>
<a class="btn contact-details" href="tel:801-885-6352"><i class="fas fa-mobile-alt"></i> Call/Text Me</a>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

最新更新