Бутстрап 4 и колонка с полной длиной час

Question

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="row">
    <div class="col-xs-5">
        <p>Something here!</p>
        <hr/>
        <p>This list!</p>
    </div>
</div>

Тег <hr> наследует родительское свойство <div>, что препятствует расширению тега <hr> до длины класса контейнера начальной загрузки.

JS Fiddle здесь: https://jsfiddle.net/7gu21n8z/

Answer 1

Bootstrap-4 удалил все варианты классов *-xs-*.Поэтому вместо col-xs-5 вы должны использовать col-5.Но если вы хотите иметь столбец полной ширины, используйте col-12 или col.

цв-12

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="row">
    <div class="col-12">
        <p>Something here!</p>
        <hr/>
        <p>This list!</p>
    </div>
</div>

цв

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="row">
    <div class="col">
        <p>Something here!</p>
        <hr/>
        <p>This list!</p>
    </div>
</div>

При этом ширина тега hr равна ширине столбца минус его отступ.Но если вы хотите 100vw hr, используйте тег hr вне контейнера.

Answer 2

В начальной загрузке 4 не существует такой вещи, как класс 'col-xs- *'.

Используйте класс col-12 вместо col-xs-5, чтобы hr получил полную ширину