Question

我在header.php文件中创建了一行，该行已分为5列。我希望将前两列“分组”，其余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大部分都是单

Answer 2

我设法解决了我的问题。对于任何可能遇到类似问题的人，我已将代码放在下面。请记住，我使用Bootstrap作为列布局，使用Font Awesome作为我的图标：

<div class="row">                   //This Row Spans full width of page.
    <div class="col-md-8">          //I wanted my row to be split into 2 'parent' columns.  This is the left hand 'parent' column.
        <p>Column Title<p>
            <div class="col-md-4">  //This is the left hand 'child' column within the above parent column.
                Bullet Point 1
            </div>              
            <div class="col-md-4">  //This is the right hand 'child' column within the above 'parent' column.
                Bullet Point 2
            </div>
    </div>

    <div class="col-md-4">          //This is the right hand 'parent' column.
        <p>Customer Area:</p>
            <div class="col-md-2">
            <p><i class="fa fa-shopping-basket" aria-hidden="true"></i>Basket</p>  //This is the left hand 'child' column.
            </div>
            <div class="col-md-2">  
            <p><i class="fa fa-user-circle-o" aria-hidden="true"></i>Account</p>  //This is the centre 'child' column.
            </div>
            <div class="col-md-2">
            <p><i class="fa fa-search" aria-hidden="true"></i></i>Search</p>  //This is the right hand 'child' column.
            </div>
    </div>

</div>

如果有人发现兼容性问题，或者我的代码存在任何其他问题，请随时告诉我们。 :-)希望这有助于任何向我提出类似问题的人。

如何在列中创建其他行

2 个答案: