twitter-bootstrap 用于宽和盒装布局的 Bootstrap CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30425990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap CSS for wide and boxed layouts
提问by webmaster
I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.
我正在使用 Bootstrap，我需要宽和盒装两种布局。我想在需要时轻松地在布局之间切换（更改）。
EDIT : How can I do like this : http://htmlstream.com/preview/unify-v1.7/Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.
编辑：我该怎么做：http://htmlstream.com/preview/unify-v1.7/Beetween 盒装和宽布局仅在主体类（盒装布局容器）中更改我不需要切换器。我会将“盒装布局容器”类放入盒装布局的主体，或者我将从主体中删除盒装布局容器类以获得宽布局。但是我不能用 bootstap 来做这件事，需要帮助。
How can I create wide and boxed layouts like following example images? And how can I change layout via class?
我如何创建宽和盒装布局，如以下示例图像？以及如何通过类更改布局？
For example:
例如：
<html>
<head>
<style>
.main-wrapper-wide {
width: 100% !important;
}
.main-wrapper-boxed {
width: 850px !important;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div class="main-wrapper-wide or main-wrapper-boxed">
<!-- header content here !-->
<!-- slider here !-->
<!-- site content here !-->
<!-- footer content here start !-->
</div>
</body>
</html>
回答by AngularJR
Do you just want the Navbar and the main containers to only be a max of 800px wide and then still be free to resize on all screens sizes. If so then this is probably all you need.
您是否只希望导航栏和主容器的最大宽度为 800 像素，然后仍然可以在所有屏幕尺寸上自由调整大小。如果是这样，那么这可能就是您所需要的。
Just use max-width:800px;and you also need to <center>the divs.
只需使用max-width:800px;，您还需要<center>div。
Here is a full size Fiddle.
这是一个全尺寸的 Fiddle。
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.clear {
margin-top:60px;
margin-bottom:60px;
}
.block1 {
height: 440px;
margin-bottom:60px;
}
.block2 {
height: 200px;
}
.bg-clr {
background-color: blueviolet;
}
.bg-clr-blk {
background-color: black;
}
.section-max-width {
max-width:800px;
}
b {
color:black;
}
</style>
</head>
<body class="bg-clr">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container section-max-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<center>
<section class="section-max-width">
<div class="clear">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block1">
<br>
The overall <b>Max Width</b> these containers and the navbar can be is <b>800px</b>.
<br>
They are still free the reduce in size when resized to fit smaller screen sizes.
<br>
Resize to see.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block2"></div>
</div><!-- /.container -->
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-clr-blk clear"><br><br></div>
</section>
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
回答by Barna Tekse
Take a look at this code snippet and try changing the main-wrapper-wideclass to main-wrapper-boxed:
看看这个代码片段并尝试将main-wrapper-wide类更改为main-wrapper-boxed：
body {
background-color: #E5E5E5;
}
.container {
max-width: 850px;
border: solid 1px #6c757d;
padding: 10px;
margin-bottom: 10px;
}
.main-wrapper-boxed {
max-width: 850px;
margin: 0 auto;
padding: 10px;
background-color: #FF7777;
}
.main-wrapper-boxed .container-fluid {
padding-left: 0;
padding-right: 0;
}
.slider {
padding: 10px;
background-color: #CDCDCD;
}
.footer {
color: #fff;
padding: 10px;
background-color: #1C1C1C;
} <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper-wide"> <!-- change class name to main-wrapper-boxed -->
<div class="container">
<div class="row header mx-0">
<div class="col-3">Logo</div>
<div class="col-8 offset-1">Header menu</div>
</div>
</div>
<div class="container-fluid slider">
<div class="container">Slider</div>
</div>
<div class="container">Site content</div>
<div class="container-fluid footer">
<div class="container">Footer</div>
</div>
</div>These were the steps I took:
这些是我采取的步骤：
- First of all, I created the page as you wanted in the Bootstrap wide example. This became the
main-wrapper-wideversion. - After that, I changed the class to
main-wrapper-boxedand customized it for the Bootstrap boxed exampleby giving itmax-width=850px. - Done!
- 首先，我在Bootstrap 宽示例中根据您的需要创建了页面。这成为了
main-wrapper-wide版本。 - 在那之后，我改变了类
main-wrapper-boxed和定制它的引导盒装例如通过给它max-width=850px。 - 完毕！
Here's a Fiddlejust in case...
这是一个Fiddle以防万一...
