Bootstrap容器自定义尺寸及底部空白去除技术咨询

问题1：使用Bootstrap时，能否为容器指定自定义宽高且不影响其默认响应式特性？ #

可以实现。你可以结合自定义CSS和Bootstrap的响应式断点来操作：

• 给容器添加自定义类，设置基础宽高，再通过Bootstrap对应的媒体查询（如@media (min-width: 576px)、@media (min-width: 768px)等），针对不同屏幕尺寸调整宽高数值，这样既保留Bootstrap容器的响应式居中逻辑，又能实现自定义尺寸需求。
• 示例代码：

.custom-container {
  width: 90%; /* 小屏默认宽度 */
  height: auto; /* 默认高度自适应内容 */
}

/* 中等屏幕及以上调整 */
@media (min-width: 768px) {
  .custom-container {
    width: 80%;
    height: 120px;
  }
}

将自定义类加到容器上：<div class="container custom-container border">

问题2：如何去除Bootstrap容器内容下方的空白？已尝试mb-0、pb-0及d-flex align-items-end，但均无效。 #

从你提供的代码和截图来看，空白大概率不是直接来自mb-0这类工具类没生效，可能是以下原因，对应解决方法：

• <p>标签默认样式被覆盖：你给<p>加了light类，可能这个类自带了margin-bottom，覆盖了mb-0。可以直接用自定义CSS强制清除：

.light {
  margin-bottom: 0 !important;
}

• footer或容器的padding/margin：检查<footer>元素是否有默认的padding-bottom，给footer添加pb-0类，或者自定义CSS：

footer {
  padding-bottom: 0;
}

• 精准定位问题：用浏览器开发者工具（F12）选中空白区域，查看元素盒模型，确认是哪个元素的margin/padding导致的空白，再针对性修改。

你提供的相关代码： #

<footer class="border">
    <div class="container border ">
        <p class="light">2024 © Secured E-Voting System for <span class="text-primary">Sulivan National High School</span></p>
    </div>
</footer>

内容的提问来源于stack exchange，提问作者RENZ MARK FERNANDO