Question

我正在使用Bootstrap，我需要两个布局用于宽和盒装。我希望在需要时轻松切换（更改）布局。

编辑：我该怎么做：http://htmlstream.com/preview/unify-v1.7/ 盒装和宽幅布局之间的Beetween仅在体型（盒装布局容器）中更改我不需要切换器。我会把＆＃34;盒装布局容器＆＃34;用于盒装布局的class to body或者我将从body中删除boxed-layout容器类以进行宽布局。但我不能用bootstap来做这件事，需要帮助。

如何创建宽大的盒装布局，如下面的示例图像？我怎样才能通过课程改变布局？

例如：

<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>

enter image description here

Answer 1

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.

Just use max-width:800px; and you also need to <center> the divs.

Here is a full size 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>

Answer 2

看看下面的代码片段，然后尝试将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>

这些是我采取的步骤：

首先，我在 Bootstrap宽示例中根据需要创建了该页面。这成为main-wrapper-wide版本。
之后，我将类更改为main-wrapper-boxed，并通过给它max-width=850px自定义了 Bootstrap框示例。
完成！

这里是 Fiddle ，以防万一...

用于宽和盒装布局的Bootstrap CSS

2 个答案: