HTML div 跨越两列两行

Question

我想我的问题真的很基本，但我更像是一个人，所以 FE 对我来说是一个黑魔法。我在 Rails 应用程序上有 Ruby，其中前端部分是标准 Rails 视图（HTML 有一些 ruby 部分）。我想在现有的跨区卡中添加额外的行，使其具有如下内容：

当前视图：

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

Answer 1

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

<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

HTML div 跨越两列两行

HTML div span two columns and two rows

html

css

twitter-bootstrap