Question

我是完全不了解Bootstrap网格的人，我的指南主要是使用网站指南并将其定制为该示例。

全屏显示时，预期输出应如下所示：预期全尺寸

，当折叠成较小尺寸时，如下所示：预期崩溃

我的主要问题是试图使“ Aside”和“ Section”部分在“ 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

因此，我对您的代码做了很多工作，我将其发布回给您，我将尽我所能地解释尽可能多的更改:) 我也不会称自己是引导专家。所以这些很有趣。

首先，我注意到<link href=不在头脑中。因此，我将其更改为引导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”类更改为“ navigation-bar”，因此您的样式将适用，因为“ nav”已经是引导程序中的预定义类，并且会覆盖您的样式。然后，我在两列中添加了“ mbody”类，并将边距和填充设置为0，以使所有内容适合在一起，而左侧或右侧没有空格。

我的结果看起来像您在上面两张图片中发布的内容。希望这会有所帮助。：）

Bootstrap Grid水平对齐和折叠

2 个答案: