根据父容器 html css 分配和证明引导行和列内容答案

【问题标题】：Distribute and justify bootstrap rows and columns content according to parent cointainer html css根据父容器 html css 分配和证明引导行和列内容
【发布时间】：2020-07-31 15:06:59
【问题描述】：

所以代码是这样的：

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

目的是根据固定的父容器高度和宽度平均分配列高度。不管它的内容。请参阅图形以阐明假装的内容。我想转这个：

进入这个：

我看到其他帖子建议使用“display:flex”来做类似但不完全一样的事情。当我使用“display:flex”来尝试使用以后的对齐项目时，会丢失引导列信息。谢谢。

【问题讨论】：

在继续之前，请检查您的原始代码并查看" container" 是否真的存在或只是您的问题中的错字。
仅在问题中。原代码是other。
是的，这有点道理...我猜...无论如何请看我的answer

标签： html css justify

【解决方案1】：

基本引导

BS uses classes 确定布局、样式和响应能力。 BS CSS 是紧密集成的，因此可以最大限度地减少冲突并且难以覆盖。你需要尽可能地使用BS类。
如果您需要 BS 类未涵盖的不寻常样式，请尽量减少它们 - 最好使用 style 和/或 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> 标签的使用。它在语义上有效且OK，但不是必需的。我这样做是为了打破 <div> 的单调性，这会使开发人员容易出错（您的示例缺少结束标记）。所以类层次结构是必需的——替代标签不是必需的，但建议使用。

~~<section>~~

BS 课程

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

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

【讨论】：

您的anwser不仅完美地解决了问题，而且您也很有启发性。非常感谢。像魅力一样工作:)
德纳达，@JuanJesus