使用Bootstrap设置Div样式：Div对齐、间距及等高问题求助

嘿，我来帮你搞定这两个布局小问题！针对你提到的列间距设置和高度不一致的问题，结合Bootstrap的特性，给你具体的解决方案：

1. 让两个div（列）高度一致 #

Bootstrap 4+的.row本身就是Flex容器，要让同一行的列高度相等，有两种简单易用的方法：

方法一：使用内置类h-100 #

直接给每个列添加h-100类，强制它们占满父容器（.row）的高度，不管内容多少都能保持高度统一：

<div class="container-fluid">
  <div class="row" id="wrapper">
    <!-- 第一列 -->
    <div class="col-lg-8 col-md-8 h-100" id="columneone">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco lab...</p>
    </div>
    <!-- 第二列（补全你漏写的部分示例） -->
    <div class="col-lg-4 col-md-4 h-100" id="columntwo">
      <p>这里是第二列的短内容</p>
    </div>
  </div>
</div>

方法二：利用Flex的垂直拉伸特性 #

Bootstrap 4+的.row默认自带align-items-stretch属性，会自动让列拉伸到同一高度。如果之前的代码覆盖了这个属性，显式给.row加上align-items-stretch类即可：

<div class="row align-items-stretch" id="wrapper">
  <!-- 列内容 -->
</div>

2. 在两个div（列）之间设置间距 #

Bootstrap提供了两种规范的间距设置方式，避免手动写CSS破坏栅格布局：

方法一：使用内置间距类（推荐） #

• Bootstrap 5版本：直接给.row添加gap-*类（*代表间距尺寸，比如gap-2、gap-3，对应预设的间距大小），这是最简洁的方式：

<div class="row gap-3" id="wrapper">
  <!-- 列内容 -->
</div>

• Bootstrap 4版本：给每个列添加水平外边距类（比如mx-2），同时给.row添加mx-n2抵消负边距，防止列超出容器：

<div class="row mx-n2" id="wrapper">
  <div class="col-lg-8 col-md-8 mx-2 h-100" id="columneone">
    <!-- 内容 -->
  </div>
  <div class="col-lg-4 col-md-4 mx-2 h-100" id="columntwo">
    <!-- 内容 -->
  </div>
</div>

方法二：自定义CSS间距 #

如果需要更灵活的间距数值，可以给列添加自定义样式，比如：

#columneone {
  margin-right: 2rem; /* 自定义右侧间距，根据需求调整 */
}

不过优先推荐用Bootstrap内置类，更符合框架规范，也不容易出现布局错位。

最后提醒下：你提供的代码里只写了一个列，记得补全第二个列的代码，上面的方案才能完全生效哦～

内容的提问来源于stack exchange，提问作者Pioneer2017