代码之家 › 专栏 › 技术社区 › Nicolas Berthier

Bootstrap 5基于内容的包装

bootstrap-5 twitter-bootstrap css

Nicolas Berthier · 技术社区 · 3 年前

在Bootstrap 5中,假设以下情况,如果一个单元格中的文本“My text”或“My other text”被包装,有没有办法让Bootstrap以每列一行的方式布置两行?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row row-cols-2">
    <div class="col">My text</div>
    <div class="col">My other text My other text My other text My other text </div>
  </div>
</div>

0 回复 | 直到 3 年前

isherwood 3 年前

这里可能不需要常规的行和列类。他们带来了一些妨碍这件事的东西。只需使用bare flex,在行上设置wrap,在列上设置nowrap。

在标准模式和整页模式之间切换,以查看其工作情况。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="d-flex flex-wrap">
    <div>My text</div>
    <div class="text-nowrap">My other text My other text My other text My other text My other text </div>
  </div>
</div>