Bootstrap 4 是一个流行的前端框架，它提供了许多工具来帮助开发者创建响应式和美观的网页。在网页设计中，行间距是一个重要的元素，它影响着文本的可读性和视觉效果。本文将详细介绍如何在 Bootstrap 4 中设置行间距，帮助您打造专业的网页布局。

基本概念

在 Bootstrap 4 中，行间距主要通过 CSS 的 line-height 属性来控制。line-height 属性定义了行与行之间的距离，它可以是绝对值、相对值或百分比。

设置行间距

使用 CSS

1. 直接设置：在 CSS 中，可以直接为需要设置行间距的元素添加 line-height 属性。

   .my-text {
     line-height: 1.5; /* 相对值，1.5 倍的字体大小 */
   }

1. 使用百分比：使用百分比可以更灵活地控制行间距。

   .my-text {
     line-height: 150%; /* 150% 的字体大小 */
   }

使用 Bootstrap 类

Bootstrap 4 提供了一些预定义的行间距类，可以直接使用。

1. .h1 至 .h6 类：这些类用于设置标题的行间距。

   <h1 class="h1">标题 1</h1>
   <h6 class="h6">标题 6</h6>

1. .lead 类：用于设置大型文本的行间距。

   <p class="lead">这是一个大型文本段落。</p>

1. 自定义行间距：可以使用自定义的行间距类。

   <p class="text-lg">这是一个大行间距的段落。</p>

在 CSS 中定义 .text-lg 类：

   .text-lg {
     line-height: 1.75; /* 1.75 倍的字体大小 */
   }

调整行间距

增加或减少行间距

要增加行间距，可以将 line-height 的值设置得更大；要减少行间距，可以将值设置得更小。

使用媒体查询

使用媒体查询可以根据不同的屏幕尺寸调整行间距。

@media (max-width: 768px) {
  .my-text {
    line-height: 1.4; /* 在小屏幕上减少行间距 */
  }
}

总结

在 Bootstrap 4 中设置行间距非常简单，您可以使用 CSS 或 Bootstrap 提供的预定义类来实现。通过合理设置行间距，可以提升网页的可读性和视觉效果，打造专业的网页布局。