Можно ли применить стиль CSS ко всей строке внутри столбца? - PullRequest
Новая
       19

Можно ли применить стиль CSS ко всей строке внутри столбца?

1 голос
/ 08 июля 2019

Используя систему Bootstrap 4 Grid, у меня следующая структура: https://i.imgur.com/Qa0xXAk.png

У меня есть столбец содержимого и два пустых столбца внутри каждой строки.Иногда мне нужно применить стиль CSS ко всей строке. 

<div class="container">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      Lorem ipsum
    </div>
    <div class="col-sm-3"></div>
  </div>

  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      dolor sit amet,
    </div>
    <div class="col-sm-3"></div>
  </div>
  ....
  <div class="row custom-background-color">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      consecteur adipiscing elit,
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

Но в то же время становится неудобным иметь несколько повторяющихся кодов.Я хочу перегруппировать код, чтобы иметь определение столбца только один раз.

<div class="container">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <div class="row">Lorem ipsum</div>
      <div class="row">dolor sit amet,</div>
      ...
      <div class="row custom-background-color">consecteur adipiscing elit,</div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

Я ожидаю, что стиль CSS будет не для одного столбца, а для всей ширины страницы.Можно ли обойти или найти решение для решения проблемы?

1 Ответ

0 голосов
/ 15 июля 2019

Да, это возможно, если у вас одинаковое количество строк в каждом столбце.Затем вы можете использовать селектор nth-child для передачи стилей, например, в пятую строку в каждом столбце. 

div[class^="col"] .row:nth-child(2) {
    background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
     <div class="row">ipsum</div>
      <div class="row"> amet,</div>
      <div class="row"> elit,</div>
    </div>
    <div class="col-sm-6">
      <div class="row">Lorem ipsum</div>
      <div class="row">dolor sit amet,</div>
      <div class="row">consecteur adipiscing elit,</div>
    </div>
    <div class="col-sm-3">
     <div class="row">Lorem ipsum</div>
      <div class="row">dolor</div>
      <div class="row">consecteur</div></div>
  </div>
</div>
...