Bootstrap 3 的全宽和盒装宽度
Posted
技术标签:
【中文标题】Bootstrap 3 的全宽和盒装宽度【英文标题】：Full and boxed width with Bootstrap 3 【发布时间】：2014-12-24 03:47:25 【问题描述】：我要建立一个有两种布局的网站：Bootstrap 3 的盒装和全宽。作为引导文档，我可以使用.container-fluid 创建全宽布局，对吗？另外，我也想知道如何创建盒装宽度布局。
【问题讨论】：
Container-fluid vs .container的可能重复 将.container 用于仅在屏幕尺寸断点（XS、SM、MD、LG）处改变宽度的固定宽度布局。
【参考方案1】：
将 .container 用于响应式固定宽度容器。
<div class="container">
...
</div>
将 .container-fluid 用于全宽容器，跨越视口的整个宽度。
<div class="container-fluid">
...
</div>
http://getbootstrap.com/css/
【讨论】：
听起来他想要一个插页。 （盒装内容）更具适应性而非响应性。 ;)【参考方案2】：听起来您所指的解决方案是让您使用媒体查询指定容器宽度。
这样的东西应该适用于你所追求的：
/* Customize container */
@media (min-width: 960px)
.container
max-width: 780px;
以上内容适用于您是否希望页面具有响应性（流畅）。如果您添加以上内容并从他们的页面添加默认模板，您应该会看到差异。希望这会有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's javascript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
【讨论】：
嗨@brian-mallett 谢谢你，我会检查你的建议：D 只是为了增加一点...@Dennis 关于使用 .container 类是正确的。默认情况下，引导程序包括“理想”大小的媒体查询中断。但是，如果您想在自己决定的休息时间完成特定的外观或感觉，则需要用自己的媒体查询覆盖它们。以上是关于Bootstrap 3 的全宽和盒装宽度的主要内容，如果未能解决你的问题，请参考以下文章