Bootstrap 用于宽布局和框式布局的引导CSS

23c0lvtd 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(197)

我正在使用 Bootstrap ，我需要两个布局宽和盒装。我想轻松切换（改变）之间的布局时，需要的。
编辑：我怎么能这样做：http://htmlstream.com/preview/unify-v1.7/ Beetween boxed and wide layout changing only in body class（boxed-layout container）我不需要切换器。我将把“boxed-layout container”类放到boxed layout的主体中，或者我将从boxed layout的主体中删除boxed-layout container类。但是我不能用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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/30425990/bootstrap-css-for-wide-and-boxed-layouts

2条答案

按热度按时间

kg7wmglp1#

你是否只想让导航栏和主容器的最大宽度只有800px，然后仍然可以在所有屏幕尺寸上自由调整大小？如果是这样，那么这可能就是你所需要的。
只需使用max-width:800px;，您还需要<center>的div。
这是一个**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>

赞(0）回复(0）举报 2022-12-16

4sup72z82#

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

以下是我采取的步骤：
1.首先，我创建了您在 *Bootstrap wide示例 * 中想要的页面。这成为了main-wrapper-wide版本。
1.之后，我将该类更改为main-wrapper-boxed，并通过将其命名为max-width=850px，为 *Bootstrap boxed示例 * 定制了该类。
1.搞定了！
这里有一个Fiddle，以防万一...

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 用于宽布局和框式布局的引导CSS

2条答案

相关问题

热门标签

最新问答