Question

我确定这可能是一个简单的问题，但我还没有想到它。

如何创建全屏流体容器，并将内容（包括导航）置于页面的中心，就像在非流体容器中一样？

我只想让顶部的导航/标题背景在整个页面上展开，同时保持内容的固定宽度。

Answer 1

您可以使用导航内容将.container与您添加背景样式的其他<div>包围。请参阅以下示例：

.background {
  background-color: #f99;
}

.content {
  background-color: #9f9;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="background">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 content">Content</div>
    </div>
  </div>
</div>

Answer 2

粗略的方法是使用Bootstrap网格概念。 Bootstrap将您的行分为12个列。诀窍在于在4空间块之前和之后插入4个黑色空间块。例：

＆＃13;

<div class="container-fluid">
	<div class="row">
      
		<div class="col-sm-4"></div>
      
		<div class="col-sm-4">
			<h2>Title</h2>
			<p>Your content here</p>
		</div>
      
		<div class="col-sm-4"></div>
	</div>
</div>

＆＃13;

Bootstrap 3流体容器，中心内容

2 个答案: