根据父容器 html css 分配和调整 bootstrap 行和列内容

Question

所以代码是这样的：

<section height=“1000px” width=”100%”>
   <div class=" container">
      <div class="row">
         <div class="col-md-12"></div>
      <div class="row">
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
   </div>
</section>

目的是根据固定的父容器高度和宽度平均分配列高度。无论其内容如何。查看图表以阐明假装的内容。我想转这个：

进入这个：

我看到其他 post 建议使用 "display:flex" 来做类似但不完全相同的事情。当我使用 "display:flex" 尝试使用以后的对齐项时，会丢失 bootstrap 列信息。谢谢。

Answer 1

基础知识Bootstrap

BS uses classes 决定布局、样式和响应能力。 BS CSS 紧密集成，因此冲突最小化并且难以覆盖。尽量用BSclasses.
如果您需要 BS classes 未涵盖的不寻常样式，请将它们保持在最小限度 - 最好使用 style and/or width/height个属性。
```
<main ... height='1000px' style='min-height: 1000px'>...</main>
```
在 DOM 的顶层是基本布局标签。它应该遵守的层次结构：
```
<body>
  <main class='container'>
    <sector class='row'>
      
      <div class='col-6'></div><div class='col-6'></div> 
```
注意，使用 <main> 和 <section> 标签。它在语义上有效且正常，但不是必需的。我这样做是为了打破 <div> 的单调，这使开发人员容易出错（您的示例缺少结束标记）。因此 class 层次结构是必需的——替代标签不是必需的，但建议使用。
在 OP HTML 中，.container 根据第 #3 点被包裹在 <section> 中，唯一应该包裹 [=16= 的标签] 是 <body>。所以删除 ~~<section>~~.
另外，在OPHTML中，最后一个.row有四个.col-md-6，每个.row的总数应该是12。再添加一个.row 并将其中两个 .col-md-6 移动到其中。

BS 类

以下简要概述了使用了哪些 BS classes 和内联样式以及原因：

<style>
- .box::after {content: attr(class);} - 显示标签的 classList 用于演示目的
<main>
- .container - 需要布局
- .d-flex、.flex-column、.align-content-stretch - 使所有 .row 垂直且均匀地伸展
- .text-center - 由于继承，所有后代标签文本都居中
- 内联样式 - width='100%' height='1000px' style='min-height: 1000px'
<section>
- .row - 需要布局
- .flex-fill - 确保标签及其同级标签的高度均匀填充在其父标签的高度内
<div>
- .col-md-12/6 - 需要布局
- .d-flex、.flex-wrap、.justify-content-center、.align-content-center - 所有内容都水平和垂直居中

此外，您最终会想知道如何覆盖 BS 样式（如果还没有的话）——请参阅此 article。

演示

注意：详情在demo中评论，请在全页模式下查看demo。

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- External stylesheets go here - these styles will override* styles from 
       preceding stylesheets -->
  <!-- Example: <link href="style.css" rel="stylesheet"> -->

  <!-- Any styles only applying to this page goes into the <style> tag below. 
       These styles will override* any style from a stylesheet -->
  <style>
    body {
      background: #000;
    }
    
    .box::after {
      content: attr(class);
    }
  </style>
</head>

<body>

  <!-- Any inline style (aka style attribute or width/height attribute) overrides*
       external stylesheets and style tags -->
  <!-- *override is guaranteed due to the rules of cascading with the exception of
       !importance and specificity -->  

  <main class="container bg-dark border border-light d-flex flex-column align-content-stretch text-center" width='100%' height='1000px' style='min-height: 1000px'>
    <section class="row flex-fill">
      <div class="box col-md-12 bg-primary border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-warning border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-success border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-danger border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-info border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
  </main>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <!-- All external script files should here -->
  <!-- Example: <script src='script.js'></script> -->

  <script> 
   <!-- Script for just this page belongs -->
  </script>
</body>

</html>

根据父容器 html css 分配和调整 bootstrap 行和列内容

Distribute and justify bootstrap rows and columns content according to parent cointainer html css

html

css

justify

基础知识Bootstrap

BS 类

演示