Question

我正在尝试制作简历网页。我正在使用Bootstrap 4协助我进行响应式设计。我正在努力分隔不同的可折叠（div）元素。

我在w3schools上查找了一些资源。我看到可以使用HTML br标签在段落中创建新行。但是，这不会在不同元素之间添加换行符（空格）。

这是我的代码

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <p></p>
  <p>Some text here. </p>
</div>

</body>
</html>

当前，我正在使用一个空的p标签（请参见上文）在可折叠元素和以下元素之间添加空格。但是，还有其他方法可以增加空间吗？还是这种方法独立于视口/设备？

Answer 1

使用Bootstrap时，可以使用Bootstrap的间距实用程序在需要的地方添加间距。

示例：

更改

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">

到

<button type="button" class="btn btn-primary mb-3" data-toggle="collapse" data-target="#demo">

是否已将mb-3类添加到按钮？那在它下面增加了间距。

您可以了解有关引导程序间距实用程序here的更多信息。

Answer 2

将自定义CSS添加到文档中

<style>
#demo{
     margin-bottom: 20px;
}
</style>

Answer 3

首先，您正在学习HTML。

我在您的代码中看到的问题：

div＃demo用于包装文本，请参见div docs。因此，如果您需要使用p（block）span（inline）进行文本包装，则应将div用于内容布局，这是更多内容，但它们是基础知识。

如果您选中Browser DefaultValues，将会看到p标签在#demo上缺少空白。

最简单的方法是在第一段周围添加p

<div id="demo" class="collapse">
  <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Some text here. </p>
<div>

Answer 4

您还可以将空的

标签替换为换行符
标签

<div class="container">
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="collapse" 
          data-target="#demo">
    Simple collapsible
  </button>
  <div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <br>
  <p>Some text here. </p>
</div>

Answer 5

我总是使用<br />。您需要使用一些（大约3或4）来在元素之间留出空间。

如何在网页上增加空间？

5 个答案: