我使用 bootstrap4 设计了一个简单的网页，但无论我尝试什么，我都无法使其响应。谁能帮我？

我仍然是Web开发基础知识的新手。以下是我的JavaScript，CSS和HTML代码。我尝试使用 bootstrap 4 使我的页面响应，但我无法使用 d-flex 将我的内容最小化到不同的设备(我也附上了一张图像以供参考(。谁能指出我哪里出错了？我的页面是关于使用 CSS 的线性渐变属性以及随机颜色组合生成器按钮生成背景。我为背景(2(和字体文本(1(使用了3种颜色输入。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var textColor = document.querySelector(".textcolor");
var randomColorGenerator = document.getElementById("randomgen");
setGradient();
function setTextColor() {
	body.style.color = textColor.value;
}
function setGradient() {
	body.style.background = 
	"linear-gradient(to right, " 
	+ color1.value 
	+ ", " 
	+ color2.value 
	+ ")";
body.style.backgroundAttachment = "fixed";
	css.textContent = body.style.background + ";";
}
function randomColor() {
var hex = "#" + Math.floor(Math.random()*16777216).toString(16);
return hex
}
function generateRandomColorButton() {
color1.value = randomColor();
color2.value = randomColor();
setGradient();
}
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
textColor.addEventListener("input", setTextColor);
randomColorGenerator.addEventListener("click", generateRandomColorButton);

body {
width: 100%;
height: 100%;
	min-height: 100%;
	background: linear-gradient(to right, red, yellow);
background-attachment: fixed;    
}
h1 {
font: 600 3.5em 'Raleway', sans-serif;
text-transform: uppercase;
letter-spacing: .5em;

}
.color1, .color2, .textcolor {
cursor: pointer;
}
h2 {
font: 500 2em 'Raleway', sans-serif;
letter-spacing: .25em;
font-variant: small-caps;
}
.labelcolor {
font: 800 1em 'Raleway', sans-serif;
font-variant: small-caps;
letter-spacing: 0.25em;
}
h3 {
	font: 900 1em 'Raleway', sans-serif;
text-transform: none;
letter-spacing: 0.01em;
}
.btn{
padding: 10px;
font-weight: 400;
font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
	<title>Gradient Background</title>
	<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Animate.css stylesheet -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
	<div class="container d-flex flex-row align-items-center justify-content-center">
	<div class="row justify-content-center align-items-center">
	<header class="text-center col-12">	
	<br><br><h1 class="animate__animated animate__backInLeft">Background Generator</h1><br><br>
	<label for="color1" class="labelcolor">Color1</label>
	<input class="color1" type="color" name="color1" value="#00ff00">
<label for="color1" class="labelcolor">Color2 </label>
	<input class="color2" type="color" name="color2" value="#ff0000">
	<label for="textcolor" class="labelcolor">Text Color</label>
	<input type="color" class="textcolor" name="textcolor" value="#000000">
	<br><br><h2>Current CSS Background</h2><br><br>
	<h3></h3><br><br>
	<button id="randomgen" class="btn btn-primary btn-lg">Random Color Generator</button>
	</header>	
	</div>
	</div>
	<!-- Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
	
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

这是网页在iPhone x上的外观截图

。

我认为您需要减小h1, h2, h3, h4, h5的字体大小在移动设备上看起来不错

更新：

你可以试试这个：

使用下面的这个更改引导程序 4 CDN。(我从 Boostrap 4 的官方文档中得到这个(。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

用这个更改 Jquery 和 Bootstrap 4 JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

将 CSS 更改为：

body {
width: 100%;
height: 100%;
min-height: 100%;
background: linear-gradient(to right, red, yellow) fixed;
}
h1 {
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
}
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.color1, .color2, .textcolor {
cursor: pointer;
}
.labelcolor {
font: 800 1em 'Raleway', sans-serif;
font-variant: small-caps;
letter-spacing: 0.25em;
}
h3 {
font: 900 1em 'Raleway', sans-serif;
text-transform: none;
letter-spacing: 0.01em;
}
.btn{
padding: 10px;
font-weight: 400;
font-variant: small-caps;
}

这是最终的HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Background</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
<div class="container d-flex flex-row align-items-center justify-content-center">
<div class="row justify-content-center align-items-center">
<header class="text-center col-12">
<br><br><h1 class="animate__animated animate__backInLeft">Background Generator</h1><br><br>
<label for="color1" class="labelcolor">Color1</label>
<input class="color1" type="color" name="color1" value="#00ff00">
<label for="color1" class="labelcolor">Color2 </label>
<input class="color2" type="color" name="color2" value="#ff0000">
<label for="textcolor" class="labelcolor">Text Color</label>
<input type="color" class="textcolor" name="textcolor" value="#000000">
<br><br><h2>Current CSS Background</h2><br><br>
<h3></h3><br><br>
<button id="randomgen" class="btn btn-primary btn-lg">Random Color Generator</button>
</header>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

我改变的是几件事：

删除完整性和匿名 - 如果您只是为本地开发它开发你不需要它。对于生产用途，您可以下载脚本和样式。
清理 CSS
添加一些引导row和col来证明响应能力

希望对你有帮助~

你需要改变这个

<header class="text-center col-12 col-sm-11">

在这里，Col-12 和 Col-SM-11 是引导网格点，它们告诉我们所有形状和大小的构建布局。

你可以从这里学习它们：https://getbootstrap.com/docs/4.1/layout/grid/

相关内容

最新更新

热门标签：