Как создать дополнительную строку в столбце

Question

Я создал строку в моем файле header.php, которая была разделена на 5 столбцов. Я хочу «сгруппировать» первые 2 столбца вместе с остальными тремя столбцами, также «сгруппированными» вместе.

<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

мне удалось решить мою проблему. Для тех, у кого, возможно, была аналогичная проблема, я разместил код ниже. Просто имейте в виду, что я использую Bootstrap для макета столбца и шрифт Удивительная для моих икон:

<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> 

Если кто-то видит проблему совместимости, или даже какие-либо другие проблемы с моим кодом, не стесняйтесь, дайте мне знать , :-) Надеюсь, это поможет любому, кто задает мне подобный вопрос.

Answer 2

Почему нет?

<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; 
} 

идентификаторы в основном появляются сингл