gpt4 book ai didi

html - 缩放 Bootstrap 旋转木马

转载 作者:行者123 更新时间:2023-11-28 16:32:47 25 4
gpt4 key购买 nike

我正在使用 Bootstrap (新手),我正在尝试创建一个轮播,它占据页面的大约 60%,在底部留出一些空间,并在窗口缩小到时使其正确缩放移动尺寸等。现在,当窗口调整大小时,轮播逐渐消失,然后当窗口处于最小尺寸时完全消失。这是我的代码:

<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css">

<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>


<!--Navigation bar-->

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">B Media</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Technique</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</nav>

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/img1.jpg" alt="Chania" class="CarouselImages">
<div class="carousel-caption">
</div>
</div>


<div class="item">
<img src="Images/img2.jpg" alt="Flower" class="CarouselImages">
<div class="carousel-caption">
</div>
</div>

<div class="item">
<img src="Images/img3.jpg" alt="Flower" class="CarouselImages">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>

任何帮助将不胜感激,如果有人能告诉我为什么我的图像在浏览器中颠倒加载,那将是一个很大的帮助。

最佳答案

在你的css文件中写:

header.carousel {
height: 60%;
}

它应该适用于所有设备:移动设备和桌面设备。

对于旋转木马底部的一些空间,请在您的 css 中写入:

.carousel-inner {
margin-bottom:50px; /*adjust accordingly*/
}

关于html - 缩放 Bootstrap 旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35049816/

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