我希望图像填充屏幕的整个宽度,但不class = "img-fluid d-block"
从图像中移除。图像如下所示:https : //postimg.cc/2qw4GK4q
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block">
</div>
</div>
</div>
我认为您的主要问题是您使用的是引导程序的较旧版本,并且我不确定所使用的类(img-fluid
和d-block
)是否甚至存在于旧的3.x版本中
在下面的示例中,所需的唯一更改是将vw-100
类添加到图像并将p-0
类添加到容器div。我删除了未使用的脚本块,以使其更加清晰。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block vw-100">
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句