引导 <Container> 组件中的全宽块；答案

【问题标题】：Full width block within bootstrap <Container> component;引导 <Container> 组件中的全宽块；
【发布时间】：2021-09-28 01:06:26
【问题描述】：

我的<Container> 在树的某个地方。在像<MainLayout>这样的抽象组件中

类似

<div className="d-flex flex-column vh-100">
   <Header />
   <Container className="flex-grow-1">{children}</Container>
</div>

然后在其中一个组件中，我有一个 <SubHeading> 组件，它应该跨越整个宽度。我可以处理<Container> 为每个屏幕尺寸添加填充的事实。我只会为我的 <SubHeading> 组件添加负边距。我无法解决的问题是<Container> 也修复了max-width 和margin: auto。这意味着在某些时候负边距是不够的，我的<SubHeading> 组件将开始从左到右有空格。（见附图）

我不能以某种方式真正拆分它，因为这样我的可重用 MainLayout 将没有任何填充，这意味着它将失去其主要职责之一。

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

如果您想避免容器侧面的默认填充/边距，您可以使用 container-fluid 类而不是 container。这将它跨越到所有尺寸的 100% 屏幕宽度。 Bootstrap Fluid Containers

【讨论】：