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

Bootstrap 5基于内容的包装

bootstrap-5 twitter-bootstrap css

Nicolas Berthier · 技术社区 · 4 年前

在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 回复 | 直到 4 年前

isherwood 4 年前

这里可能不需要常规的行和列类。他们带来了一些妨碍这件事的东西。只需使用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>

推荐文章

Welshy1235 · 在移动模式下引导导航栏不工作

3 年前

Kudafukuron · 为什么?导航栏深色不工作(Bootstrap v5.2)?

3 年前

Mickey Vershbow · 无法获取复选框的“checked”属性

3 年前

Amr El-Nagdy · 如何折叠导航栏onclick(bootstrap5)

3 年前

Kameron_Huggins · 无法在Bootstrap 5中更改<body>的字体系列吗?

4 年前

Wadu Hek · 引导汉堡图标与Navbar品牌不一致

4 年前

964 · 移动站点略超出设备屏幕宽度

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

Faizan Gigani · 导航栏向右滑动

4 年前

fightstarr20 · 带固定边栏的Bootstrap 5布局-下表推送内容

4 年前