Обёртка в -col- лишняя?

209

12 января 2019, 14:40

Насколько корректно в bootstrap навешивать классы -col- на таблицу?

То есть вместо:

<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
        <table class="table">
        ...
        </table>
    </div>
</div>

Сразу писать без обёртки в row и -col-:

<table class="table col-sm-12 col-md-6 col-lg-4">
        ...
</table>

Вроде бы в последних FF и Chrome работает как надо, но интересно вообще насколько корректно навешивать флексы (на них я так понимаю сделаны col в четвертом бутстрапе) на таблицу.

Answer 1

Философский вопрос, так как можно сделать всё что угодно, и оно даже может работать. Но на мой взгляд это совершенно не корректно. col и row отвечают за сетку, и их не следует путать с другими элементами без надобности. Корректно было бы положить таблицу во внутрь col, ну или в ячейку положить row вместе c col. Сами бутстрап пишут, что весь контент должен оборачиваться в эти элементы, допустима любая вложенность. Не хочешь отступов - вешай no-gutters.

Если их совместить то как минимум, таблица вылезет за контент. Наглядный пример:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-12"> 
      <div class="jumbotron"> 
        <h1 class="display-4">Контент</h1> 
        <p class="lead">Контент, какой-то там контент...</p> 
 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-12"> 
      <table class="table table-dark"> 
        <thead> 
          <tr> 
            <th colspan="4">Таблица внутри col</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr> 
            <th>1</th> 
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
          </tr> 
          <tr> 
            <th>5</th> 
            <td>6</td> 
            <td>7</td> 
            <td>8</td> 
          </tr> 
          <tr> 
            <th> 
              <div class="row"> 
                <div class="col-12"> 
                  <div class="alert alert-primary" role="alert"> 
                    row>col внутри ячейки 
                  </div> 
                </div> 
                <div class="col-4"> 
                  <div class="alert alert-secondary" role="alert"> 
                    1 
                  </div> 
                </div> 
                <div class="col-4"> 
                  <div class="alert alert-success" role="alert"> 
                    2 
                  </div> 
                </div> 
                <div class="col-4"> 
                  <div class="alert alert-danger" role="alert"> 
                    3 
                  </div> 
                </div> 
              </div> 
            </th> 
            <td>10</td> 
            <td>11</td> 
            <td>12</td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
  </div> 
 
  <div class="row"> 
    <table class="table table-dark col-12"> 
      <thead> 
        <tr> 
          <th colspan="4">Таблица + col</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th>1</th> 
          <td>2</td> 
          <td>3</td> 
          <td>4</td> 
        </tr> 
        <tr> 
          <th>5</th> 
          <td>6</td> 
          <td>7</td> 
          <td>8</td> 
        </tr> 
        <tr> 
          <th>9</th> 
          <td>10</td> 
          <td>11</td> 
          <td>12</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>