gpt4 book ai didi

html - 使用 bootstrap 时 Div 意外地比页面宽度短

转载 作者:行者123 更新时间:2023-11-28 19:22:54 24 4
gpt4 key购买 nike

我试图让 h1 标题“标题”在页面中央对齐,但由于某种原因,div 没有页面本身那么宽。我正在使用 Bootstrap css 和 Angular。为什么名为 maincontent 的蓝色 div 不是整个页面宽度?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<!-- Header -->
<div id="maincontent">
<h1 class="name text-center" style="align-content:center">Title</h1>
<hr class="star-light text-center">
<span class="skills">x -- x -- x</span>
</div>
.....

enter image description here

通过将 Bootstrap 添加到 angular.json 来导入它:

"styles": [
"src/my-theme.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/app/dragndrop/dragndrop.js"
]

最佳答案

问题一定出在您的 CSS 的其他部分。当我在干净的 Bootstrap CDN 上测试您的 html 时,它工作正常,标题居中。采取下面的片段并从那里开始。一次添加另一个样式表,找出并修复导致 div 不是全宽的原因。

<!DOCTYPE html>
<html>
<head runat="server">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div>
<h1 class="name text-center">Title</h1>
<hr class="star-light text-center">
<span class="skills">x -- x -- x</span>
</div>
</body>
</html>

关于html - 使用 bootstrap 时 Div 意外地比页面宽度短,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56976096/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com