Php 使用引导创建跨越屏幕宽度的行

我试图创建一个布局，类似于不同部分横跨整个屏幕宽度的布局。我在查看布局的html/css，不明白为什么我的视图没有这样做。（我对创建页面比较陌生）

我使用php使创建页面更容易，所以我有一些文件

.jumbotron{
背景：灰色；
身高：50%；
边缘顶部：10px；
}
.jumbotron p，h1{
文本对齐：居中；
}
.导航{
文本对齐：居中；
填充：0；
保证金：0；
背景色：红色；
身高：10%；
}
李国荣先生{
显示：内联块；
保证金权利：5%；
左缘：5%；
}
.容器#关于{
背景：蓝色；
身高：50%；
}
.集装箱#我{
背景：蓝色；
身高：50%；
}

家
关于
接触

例子
示例段

关于
更多

扩展行的问题很简单，添加以下规则：

body {
    margin: 0;
}

---

在Bootstrap中，您可以将12列网格放置在

.container

或

.container fluid

中。如果您希望栅格最大跨度为1170像素，则使用第一个，如果您希望栅格最大跨度为整个屏幕，则使用第二个。两者都有15个像素的水平边距，使内容与屏幕边缘保持一定距离。对于文本来说，这是一件好事，但是正如您所注意到的，如果背景色或图像跨越了整个宽度，那就更好了

如果查看链接的主题（请参见），您可能会注意到它们使用的

.container

和

.container fluid

类也不会覆盖整个屏幕宽度。它们周围有其他元素，例如

，它们在这些元素上加上背景色

请参阅此示例，其中我在容器周围放置了一个背景色为

的
，背景色为
.pink
或
.green
：


.pink{
背景色：#f99；
}
格林先生{
背景色：#9f9；
}
部分{
垫底：20px；
}

.容器液体
第一栏
第一栏
.集装箱
第一栏
第一栏
您可能正在寻找
容器流体
，它可以用来代替
容器
，并始终拉伸以占据视口的整个宽度。这会使其延伸得更多，但不会一直延伸。您正在嵌套.container。下载该模板并四处玩。你不能把一个.container放在一个.container里面的任何地方。Jumbotron是全宽的，但如果使用另一个元素（.container）将其包裹，则它将固定宽度。看看unpackagecssit中的.container类，它解决了我理解的问题。如果这不是你想要的，也许试着重新表述你的问题。