html - 在 div 内拉伸(stretch)任意数量的跨度

标签 html css 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>

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

最佳答案

您可以灵活地实现此功能。 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/

相关文章:

css - 在同一行显示图标和文本

html - 如何在媒体查询中重置居中

javascript - 验证 Bootstrap 4 表单的两个复选框

css - 如何制作一个高度可变的 DIV 下推内容?

html - 学习Bootstrap,如何在其他之后正确地制作列堆栈

html - 将 DIV 中包含的一系列图像垂直居中时出现问题

javascript - AngularJS 使用 JS 从 API 设置 CSS 文件

html - 在 HTML 中添加背景图像

html - 使单个字符的 css 样式站点变宽?

html - 如何使 flexbox 元素的后代元素可滚动?