Css 加上「；col-lg-12“；在反应灵敏的容器中使用

我正在尝试将引导面包屑导航放置在模板中

我想要的是一个100%全宽的背景色，然后在那个地方有一个

col-lg-12

，但我想不出来

此图像可能有助于：

部分

我想我可能需要“嵌套”列，但我想不出来

我走对了吗？谢谢

：-）

将.container流体用于全宽容器，跨越视口的整个宽度

您使用的是

.container流体

，因此您得到了一个100%宽度的流体容器。使用

.container

获取容器的固定值

---

还要注意的是，在

节

之后出现了一个不平衡的

，可能只是这里的复制粘贴错误。

要将内容与

对齐。内容

宽度保持节背景全页宽度，可以在

中嵌套一个
.container
。container fluid

：

.darkgrey{
背景色：#e9ecef；
}
darkgrey.面包屑{
背景色：透明；
页边距底部：0；
填充：.750；
}
.darkgrey+.container{
填料顶部：.75rem；
}

部分

测试站3

测试站3
我爱你，我爱你

OP使用

.container fluid

的原因是他们希望背景覆盖整个页面宽度。你的回答打破了这一点。正确的答案是将一个

.container

放在

.container fluid

和

.row

之间，而不是将

.container fluid

类替换为

.container

@anderigheorghiu，除非我遗漏了什么，这似乎是无缘无故的过度复杂。。。为什么不直接使用

作为外部样式？我已经更新了我的JSFIDLE。。。。或任何容器元件，

，

等，甚至是

容器流体

。我的回答并没有“打破”这一点，它只是显示了导航元素。我认为其余的都是显而易见的，这是我的错误。@AndreiGheorghiu我提供的代码是OP显示的代码块的替代品。没别的了。OP已经将它嵌套在某个对象中，即使该对象只是

主体

。在我看来，建议它必须嵌套在

.container fluid

中似乎有误导性，因为这根本不是事实。

<div class="container-fluid darkgrey">
    <div class="row">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?php echo get_option("siteurl"); ?>">Home</a></li>
                    <li class="breadcrumb-item">Section</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
                </ol>
            </nav>
        </div>
    </div>
</div>