Могу ли я иметь пакет Bootstrap внутри другого col?

Я все еще новичок в Bootstrap, и я пытаюсь выяснить, что правильно, а что нет. Допустимо ли иметь col внутри col? В приведенном ниже примере у меня есть форма, которую я хочу установить на половину экрана. Я также хочу, чтобы некоторые элементы управления формой были половинчатыми, а другая - полной. Будет ли это правильным способом для этого или есть лучший способ?

Пример кода:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<section class="row">
  <div class="container">
    <div class="col-xs-12 text-center">
      <h1>Contact</h1>
    </div>
    <form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
      <div class="form-group form-group-lg">
        <div class="col-sm-12">
          <input class="form-control" type="text" placeholder="name">
        </div>
      </div>
      <div class="form-group form-group-lg">
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="email">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="website">
        </div>
      </div>
      <button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
    </form>
  </div>
</section>

Ответы

Ответ 1

Да, это нормально, если в соответствии с Bootstrap Руководство по шаблону сетки:

Два столбца с двумя вложенными столбцами

В документации, вложенность проста - просто поместите строку столбцов в существующий столбец. Это дает вам два столбца, начиная с настольных компьютеров и масштабируя их до больших рабочих столов, а еще два (равные ширины) в столбце большего размера.

В размерах мобильных устройств, планшетах и ​​вниз эти столбцы и их вложенные столбцы будут стекаться.

Однако есть точка для Bootstrap .row, которая заключается в применении отрицательного поля для выравнивания содержимого. Если вы не возражаете против водостоков или можете самостоятельно отрегулировать столбцы, то нет смысла добавлять контейнер .row для ваших вложенных столбцов.

Ответ 2

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