如何使用Bootstrap制作盒子？匹配指定示例样式的实现方法

嘿，我来帮你搞定这个Bootstrap盒子的问题！咱们分两部分来聊：先讲基础的Bootstrap盒子制作，再针对你给出的HTML结构实现指定样式。

一、基础Bootstrap盒子制作 #

Bootstrap里最常用的盒子组件就是Card，它自带了边框、内边距、阴影等基础样式，非常适合快速搭建卡片式盒子。

基础Card示例 #

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片里的文本内容，Lorem ipsum dolor sit amet...</p>
    <a href="#" class="btn btn-primary">查看更多</a>
  </div>
</div>

• card：外层容器，提供基础的盒子样式
• card-body：包裹卡片内的文本、按钮等内容，自带内边距
• 你还可以结合Bootstrap的工具类，比如shadow-sm（添加轻微阴影）、border-0（去掉边框）、p-5（自定义内边距）来调整样式。

二、实现你指定样式的Bootstrap盒子 #

你给出的HTML结构需要左右布局（文本区+右侧盒子），咱们可以结合Bootstrap的弹性布局工具类，再补充一点点自定义CSS来实现。

步骤1：引入必要资源 #

确保你已经引入了Bootstrap的CSS和Material Design Icons（因为用到了mdi图标）：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">

步骤2：修改HTML结构（结合Bootstrap工具类） #

把你给出的结构加上Bootstrap的布局类，让它更符合Bootstrap的风格：

<div class="box d-flex align-items-center gap-4 p-4 shadow-sm border rounded">
  <div class="text flex-grow-1">
    <div class="heading h2 mb-3">Lorem ipsum dolor sit amet.</div>
    <p class="mb-4">
      Lorem ipsum dolor <br>
      sit<br>
      amet
    </p>
    <a href="#" class="text-primary d-inline-flex align-items-center gap-1">
      Lorem ipsum <i class="mdi mdi-box-right"></i>
    </a>
  </div>
  <div class="box bg-secondary-subtle rounded" style="width: 120px; height: 120px;"></div>
</div>

• d-flex：把外层盒子变成弹性容器，实现左右布局
• align-items-center：让左右内容垂直居中
• gap-4：给文本区和右侧盒子之间添加间距
• p-4 shadow-sm border rounded：添加内边距、轻微阴影、边框和圆角，让盒子更美观
• flex-grow-1：让文本区占满剩余空间

步骤3：自定义CSS（可选，调整细节样式） #

如果需要更贴合你想要的样式，可以添加一点自定义CSS：

.box .heading.h2 {
  font-weight: 700;
  color: #212529; /* 自定义标题颜色 */
}

.box .text p {
  line-height: 1.6; /* 调整文本行高 */
  color: #6c757d; /* 自定义文本颜色 */
}

.box .text a {
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.box .text a:hover {
  color: #0d6efd; /* hover时的链接颜色 */
}

这样就能实现你想要的盒子样式啦，既用到了Bootstrap的便捷工具类，又通过自定义CSS满足了特定的样式需求。

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