Bootstrap两行网格问题（第一行小于第二行）

Question

我正在学习Bootstrap，并且正在尝试一些可能很简单但我无法理解的事情。

我正在做一些实验，这是一个非常原始的设计，由只有一个col的行（标题）和位于另一行之下的两个内容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>

有帮助吗？

Answer 1

您已将背景设置为标题元素，

not具有col-sm类的div ...，而对于以下各列，您已使用col-sm-9和[C0 ]类

只需将带有背景的类添加到带有bootstrap类的div中，这样填充将包含在背景中-如下所示：

col-sm-3
.header-parent-div { background: #2c3e50; color: #fff; }

Answer 2

这种方式如何？随意根据需要设置col宽度（col-sm-9等）

Saludos

Bootstrap两行网格问题（第一行小于第二行）

问题描述投票：0回答：2

2个回答

最新问题

Bootstrap两行网格问题（第一行小于第二行）

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2