Question

在具有class =“row”的div中放置块级元素（例如 h1 ， p 等）会导致其行为类似于内联块元件！如果我删除它正确显示的“行”div。我做错了什么？

下面的示例代码导致标题和段落显示在同一行。我希望它们能在不同的行上显示。

示例代码：

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <title>Hello, world!</title>
        </head>
        <body>

            <div class="container">
                <div class="row">
                    <h1>Hello, world!</h1>
                    <p>This is a paragraph</p>
                </div>
            </div>

            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        </body>
    </html>

Answer 1

您不应将任何内容直接放入const { default: pollUntil } = require('leadfoot/helpers/pollUntil');。

相反，将一列（const pollUntil = require('leadfoot/helpers/pollUntil').default;）放入一行，然后将您的内容放入列中。

Bootstrap中的行和列设计为成对使用。永远不会孤单。

所以，如果你只需要一个填充行的整个宽度的列，那么你在行中放置一个.row类的div，就是这样。

您还可以将内容直接放入.col-*，即不使用行和列。但是直接将内容放入一行并不会产生任何目的，也会破坏你所看到的一些内容。

col

行中的块元素显示为Bootstrap 4中的内联块

1 个答案: