在div内拉伸任意数量的跨度

时间:2019-05-28 08:01:00

标签: html css css3 bootstrap-4

我有自己的轮播,并且正在尝试进行导航。

.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>

容器内的跨度是从数据库自动生成的,因此可以是任意数量。 问题是,跨度只是不会延伸到容器的整个宽度,而仅占据容器的一部分。我需要将它们放在全宽容器上,并使其宽度自动取决于其数量。

1 个答案:

答案 0 :(得分:2)

您可以灵活实现此功能。 Flex将拉伸所有子项;如果您添加 flex:1 ;

,它们就会拉伸

.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>