Более чистый способ установить полную ширину для разделов в Bootstrap

Question

        <Row>
          <Col xs={12}>
            <h3>Title of Text</h3>
          </Col>
          <Col xs={12}>
            <hr />
          </Col>
          <Col xs={12}> The content goes here</Col>
          <Col xs={12}>
            <hr />
          </Col>
        </Row>

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

Answer 1

Вы можете просто разделить его на row. Например:

<div class="row">
    <div class="col">
        <h3>Title of Text</h3>
    </div>
</div>
<hr />
<div class="row">
    <div class="col">
        The content goes here
    </div>
</div>
<hr />

Или используйте col-12, как вы упомянули.

PS: col в этом контексте используется только для удаления отрицательных боковых полей из row. Если вы удалите его отрицательные поля, вы можете даже полностью отказаться от col, чтобы стать еще чище.