html - 使用html设置轮播的宽度
问题描述
我试图减小我的轮播的宽度,这样它就不会占据页面的整个宽度,但它似乎不起作用。我希望宽度仅跨越 8 列并居中。我尝试更改 CSS 代码,使宽度为 50% 而不是 100%,但这不起作用。
.item {
height: 300px;
}
.item,
img {
height: 500px !important;
width: 100% !important;
}
.item h3 {
font-family: 'Anton', sans-serif;
font-size: 48px;
color: cornsilk;
}
.item p {
font-family: 'Anton', sans-serif;
font-size: 18px;
color: cornsilk;
}
<!--Start of carousel-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </li>
<li data-target="#carousel-example-generic" data-slide-to="2"> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/c1.jpg" alt="First slide" />
<div class="carousel-caption">
<h3>Welcome to my amazing website</h3>
<p3>Hope you enjoy!</p3>
</div>
</div>
<div class="item">
<img src="images/c2.jpg" alt="Second slide" />
</div>
<div class="item">
<img src="images/c3.jpg" alt="Third slide" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
解决方案
为什么不使用上层,即使用外部 div 元素 ( id="carousel-example-generic" class="carousel slide"
)?
例如
.carousel{
width: 50%;
margin: 0 auto;
}
使用引导程序,您还可以使用包括偏移量的引导程序网格:https ://getbootstrap.com/docs/4.0/layout/grid/
推荐阅读
- go - 如何将负数分配给接受 UINT 参数的函数
- javascript - 如何使用“while”循环创建在数组中添加数字的函数?
- xamarin.forms - Xamarin.Forms 为什么我的点击命令不起作用?
- python - 如何使用 Python 将网站内容复制到 Markdown 文件?
- java - 生成一个始终平衡的二叉搜索树,只有真正的插入
- reactjs - 如何使引导卡在同一行?反应
- javascript - 用逗号删除部分值 | Google Apps 脚本
- apache-nifi - 重命名 NiFi 流中的 JSON 字段
- c++ - 在这种情况下如何解决这个 [All] 错误 2?
- c# - 如何使用 NPOI 进行过滤