Bootstrap 网格水平对齐和折叠

Question

我是学习 bootstrap 网格的新手，我的指南主要使用网站指南并根据此示例对其进行定制。

全屏时预期的输出应该如下所示：预期全尺寸

折叠成较小尺寸时像这样：预期崩溃

我的主要问题是试图让 "Aside" 和 "Section" 部分在 "Article" 部分内相互堆叠。我什至无法让它与 "article" 部分排成一行。其他细节我会自己解决，但这部分我已经苦苦挣扎了一段时间。

CSS:

body {
background-color: black;
font-size: 2em; 
text-align: center;

}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
}

.nav {
  background-color: khaki;
  height: 50px;
  text-align: center;
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;

}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;

}

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="mystyle-Test2.css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="header">Header</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="nav">Nav</div>
        </div>
        <div class="col-md-8 col-sm-12">
            <div class="article">Article</div>
        <div class="col-md-2 col-sm-12">
            <div class="aside">Aside</div>
        <div class="col-md-2 col-sm-12">
            <div class="section">Section</div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="footer">Footer</div>
        </div>
    </div>
</div>

Answer 1

Bootstrap 的网格的工作方式是，如果您在调整浏览器大小时不需要更改它，您可以只设置一个尺寸，其余的将由您来处理。 col-md-12 应该对你一直都很好。

要解决您的主要问题，请查看嵌套项：https://getbootstrap.com/docs/4.0/layout/grid/#nesting

Answer 2

所以，我对你的代码做了很多工作，我会 post 把它还给你，我会尽可能多地解释我能记住的变化:) 我也不会称自己为 bootstrap 专家。所以这些很有趣。

首先，我注意到 <link href= 没有在头脑中工作。所以，我将其更改为 bootstrap CDN 和最新版本 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

如果您想稍后使用可折叠导航或旋转木马或类似的东西，请务必匹配来自同一来源的 Javascript...

接下来，我将网格更改为如下所示：

<div class="container-fluid">
      <div class="row">
           <div class="header">Header</div>
      </div>
      <div class="row">
           <div class="navigation-bar">Nav</div>
      </div>


 </div>
 <div class="container-fluid">
 <div class="row">
           <div class="col-sm mbody">
                <div class="article">Article</div>
           </div>
           <div class="col-sm mbody">
                <div class="row">
                     <div class="aside">Aside</div>
                </div>
                <div class="row">
                     <div class="section">Section</div>
                </div>
           </div>
      </div>
 </div>
 <div class="container-fluid">
      <div class="row">
           <div class="footer">Footer</div>
      </div>
 </div>

真的，我们想要的是单列中的两行这些变化使我们接近我们想要的。接下来的事情是给你所有的内部 div 的 100% 宽度

body {
 background-color: black;
 font-size: 2em; 
 text-align: center;

}
.mbody {
 margin: 0; 
 padding: 0; 
}

.header {
  background-color: cornflowerblue;
  height: 60px;
  text-align: center;
  width: 100%; 
}

.navigation-bar {
 background-color: khaki;
 height: 50px;
 text-align: center;
 width: 100%; 
}

.article {
  background-color: darkseagreen;
  height: 180px;
  text-align: center;
  width: 100%; 


}

.aside {
  background-color: goldenrod;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.section {
  background-color: lightsteelblue;
  height: 90px;
  text-align: center;
  width: 100%; 

}

.footer {
  background-color: lemonchiffon;
  height: 40px;
  text-align: center;
  width: 100%; 

}

请注意，最后，我将 "nav" class 更改为 "navigation-bar" 因此您的样式将适用，因为 "nav" 是 class 中的预定义 bootstrap 已经覆盖了你的样式。然后我将 "mbody" class 添加到两列并将页边距和填充设置为 0 以使所有内容都适合，并且左侧或右侧没有 space。

我的结果看起来像您在上面的两张图片中 post 编辑的结果。希望这会有所帮助。 :)

Bootstrap 网格水平对齐和折叠

Bootstrap Grid Horizontal alignment and collapse

html

css

bootstrap-grid