gpt4 book ai didi

html - Bootstrap (响应图像)不起作用(PC/移动)

转载 作者:太空宇宙 更新时间:2023-11-04 03:02:15 25 4
gpt4 key购买 nike

我正在尝试为 friend 创建一个网站。挑战在于网站上只有一张图片。但是电脑端和手机端的图片不能一样。所以我现在创建了一个函数,因此将显示或隐藏一个或另一个。

但我现在的问题是响应不起作用。 PC 端和移动端的代码是否相同?

<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Danish Bread Studio</title>
<!-- Almindelig CSS -->
<link href="stylesheet.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<img src="baggrund2.jpg" class="visible-xs" class="img-responsive" alt="responsive image">
<img src="baggrund.jpg" class="visible-lg" class="img-responsive" alt="responsive image">
<div class="box">
<p><center>Danish Bread Studio's hjemmeside er i øjeblikket under opbygning.</center></p>
</div>
</body>
</html>

最佳答案

您编写的图像标签应如下所示。您已经写了 2 次类属性。

<img src="baggrund2.jpg" class="visible-xs img-responsive" alt="responsive image">
<img src="baggrund.jpg" class="visible-lg img-responsive" alt="responsive image">

关于html - Bootstrap (响应图像)不起作用(PC/移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31132805/

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