Bootstrap 4 引导两行网格问题（顶行小于第二行）_Bootstrap 4

Bootstrap 4 引导两行网格问题（顶行小于第二行）

bootstrap-4

Bootstrap 4 引导两行网格问题（顶行小于第二行）,bootstrap-4,Bootstrap 4,我正在学习Bootstrap，正在努力解决一些可能很简单但我无法理解的问题我正在做一些实验，有一个非常原始的设计，一行只有一个col（标题），下面是另一行有两个content col。我想不出比这更简单的事情了问题是，无论我做什么，最上面一行（标题）都坚持要比内容行小。第一行和第二行之间还有一个空格我的代码如下： <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"

我正在学习Bootstrap，正在努力解决一些可能很简单但我无法理解的问题

我正在做一些实验，有一个非常原始的设计，一行只有一个col（标题），下面是另一行有两个content col。我想不出比这更简单的事情了

问题是，无论我做什么，最上面一行（标题）都坚持要比内容行小。第一行和第二行之间还有一个空格

我的代码如下：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
        user-scalable-no,
        initial-scale=1.0,
        maximum-scale=1.0,
        minimum-scale=1.0">
    <title>Tabelas</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <style>
        header {
            background:#2c3e50;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                <header>
                   <h1 class="text-center">
                        My Title
                    </h1>
                </header>
            </div>
        </div>
        <div class="row">
          <div class="col-sm-9" style="background:#e7e1c7;">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.
          </div>
          <div class="col-sm-3" style="background:#a0c9f1;">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.
          </div>
        </div>
    </div>
</body>
</html>


塔贝拉
标题{
背景#2c3e50；
颜色：#fff；
}
我的头衔
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪一台未知的打印机出现以来，Lorem Ipsum一直是业界标准的虚拟文本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪一台未知的打印机出现以来，Lorem Ipsum一直是业界标准的虚拟文本。

有什么帮助吗？

您已将背景设置为header元素，而不是具有

列sm

类的div。。。对于下面的列，您已经使用

col-sm-9

和

col-sm-3

类向div添加了背景

只需使用bootstrap类将一个具有您背景的类添加到div中，这样填充将包含在背景中，如下所示：

.header父div{
背景#2c3e50；
颜色：#fff；
}


我的头衔
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪一台未知的打印机出现以来，Lorem Ipsum一直是业界标准的虚拟文本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪一台未知的打印机出现以来，Lorem Ipsum一直是业界标准的虚拟文本。

这样怎么样？可根据需要自由设置立柱宽度（立柱-sm-9等）


标题
第1单元
第2单元

它工作得非常好。。。我被Bootstrap迷住了！非常感谢！：^）

<div class="row">
  <div class="col">
       Header

      <div class="row">
         <div class="col">
            cell 1
         </div>

         <div class="col">
           cell 2
         </div>
      </div>

  </div>
</div>