html - 如何在列中创建额外的行

Question

我在 header.php 文件中创建了一行，该行已拆分为 5 列。我想将前 2 列“组合”在一起，其余 3 列也“组合”在一起。

<div class="row">
  <div>
  <div class="col-sm-3" id="first-column">Text One</div>    //First Column
  <div class="col-sm-3" id="first-column">Text Two</div>    //First Column
  <div class="col-sm-2" id="second-column">Text Three</div> //Second Column
  <div class="col-sm-2" id="second-column">Text Four</div>  //Second Column
  <div class="col-sm-2" id="second-column">Text Five</div>  //Second Column 
  </div>
</div>

我通过在我的 css 文件中输入以下内容将文本“组合”在一起:

#first-column{
    background: #000000;
    color: #ffffff;
    padding: 15px;
}
#second-column{
    background: #ffffff;
    color: #000000;
    padding: 15px;
}

作为“分隔”2 列的一种方式，我使用 CSS 为每列应用不同的颜色。现在，我想将列标题应用于第二列而不是第一列。

有谁知道如何最好地解决这个问题？我遵循了一些教程，但它没有达到我正在寻找的确切目标。

我觉得这是“当你知道如何做时容易”的任务之一，所以希望它会很简单。

Answer 1

为什么不呢？

<div class="row">
  <div>
  <div class="col-sm-3 first-column">Text One</div>    //First Column
  <div class="col-sm-3 first-column">Text Two</div>    //First Column
  <div class="col-sm-2 second-column">Text Three</div> //Second Column
  <div class="col-sm-2 second-column">Text Four</div>  //Second Column
  <div class="col-sm-2 second-column">Text Five</div>  //Second Column 
  </div>
</div>

.first-column{
    background: #000000;
    color: #ffffff;
    padding: 15px;
}

.second-column{
    background: #ffffff;
    color: #000000;
    padding: 15px;
}

ID大多是单一的