我有自己的旋转木马,我正在尝试进行导航。
.carousel-nav-box {
width: 100%;
}
.carousel-nav-item {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: auto;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: black;
border: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel-nav-box container">
<div class="row">
<span class="col-sm carousel-nav-item"></span>
<span class="col-sm carousel-nav-item"></span>
</div>
</div>
容器内的跨度是从数据库动态生成的,所以它可以是任意数字。 问题是,跨度不会延伸到容器的整个宽度,它们只占据容器的一部分。我需要将它们放在全宽容器上,并使它们的宽度自动取决于它们的数量。
最佳答案
您可以灵活地实现此功能。 Flex 将拉伸(stretch)所有子项;如果你添加 flex: 1;
它们会拉伸(stretch).carousel-nav-box {
background-color: red;
width: 100%;
}
.carousel-nav-box .row {
display: flex;
}
.carousel-nav-item {
min-height: 50px;
margin-left: 2px;
margin-right: 2px;
background-color: black;
border: 1px solid green;
flex: 1;
}
<div class="carousel-nav-box container">
<div class="row">
<span class="col-sm carousel-nav-item"></span>
<span class="col-sm carousel-nav-item"></span>
<span class="col-sm carousel-nav-item"></span>
</div>
</div>
关于html - 在 div 内拉伸(stretch)任意数量的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56337587/