html - Bootstrap 4 & 全长 hr 列

Question

我想让一条水平线延伸到 Bootstrap 父元素指定的列宽。我正在使用 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>属性(property)，这可以防止 <hr>标记以扩展到引导容器类的长度。

js fiddle 在这里: https://jsfiddle.net/7gu21n8z/

Answer 1

Bootstrap-4 删除了所有 *-xs-* 类的变体。因此，您应该使用 col-5 而不是 col-xs-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 标签。