HTML div 跨越两列和两行

Posted 2023-03-05

【中文标题】HTML div 跨越两列和两行

【英文标题】：HTML div span two columns and two rows

【发布时间】：2022-01-17 20:42:47

【问题描述】：

我想我的问题真的很基本，但我更喜欢做人，所以 FE 对我来说是一个黑魔法。我有 Ruby on Rails 应用程序，其中前端部分是标准 Rails 视图（带有一些 ruby​​ 部分的 html）。我想添加到现有的跨卡附加行中，如下所示：

当前视图：

Issued: test         Expires: 01/01/1900

我想添加额外的行是：

Issued: test         Expires: 01/01/1900
Terminal             Rec Expires: 01/01/2000

这是我的代码

<div class="row">
  <div class="col-md-5 col-xs-5">
    <span>Issued: test</span>
  </div>
  <div class="col-md-6 col-xs-6">
    <span>Expires: 01/01/1900 %></span>
  </div>
  <div class="col-md-7 col-xs-7">
    <span>Terminal</span>
  </div>
  <div class="col-md-8 col-xs-8">
    <span>Rec Expires: 01/01/2000</span>
  </div>
</div>

但我得到的不是预期的结果：

Issued: test         Expires: 01/01/1900
Terminal
Rec Expires: 01/01/2000

【问题讨论】：

看来您正在使用引导程序。 bootstrap（像大多数现代 U/I 框架一样）使用所谓的grid。网格有一个最大宽度（cols），如果超过这个宽度就会发生。 Bootstrap 使用 12 宽的网格，因此您的前 2 个 div = 11 (6 +5);但是你的第二个 2 div = 15 (7 +8) 因为 15 > 12 发生了换行。基本上，您的 div 如下所示 5 + 6 + 7 + 8 并且包装发生在超过 12 的每个段中，因此 5 + 6 | + 7 | +8

请标记您的引导程序版本。

【参考方案1】：

..所以你需要添加行 并修复 12 列的 col- 类（查看 engineersmnky comment ）

<div class="row">
  <div class="col-md-5 col-xs-5">
    <span>Issued: test</span>
  </div>
  <div class="col-md-7 col-xs-7">
    <span>Expires: 01/01/1900 %></span>
  </div>
</div>
<div class="row">
  <div class="col-md-5 col-xs-5">
    <span>Terminal</span>
  </div>
  <div class="col-md-7 col-xs-7">
    <span>Rec Expires: 01/01/2000</span>
  </div>
</div>

如果你需要等宽的列，你必须分别设置col-md-6而不是col-md-5和col-md-7和col-xs