Bootstrap实现div响应式宽度：断点下100%宽、断点上30%父宽

你之前使用的container-md属于Bootstrap的固定响应式容器类，这类的原生设计逻辑是：

• 断点尺寸以下：宽度100%，两侧带默认内边距
• 断点尺寸以上：宽度固定为对应断点的预设值（md断点对应固定720px、lg对应960px，以此类推），水平居中
  这个类的定位是做页面最外层的固定宽度内容承载容器，本身就不是用来实现相对父元素的百分比宽度效果的，所以才会出现md断点以上宽度固定为720px的问题，和你的需求场景不匹配。

方案1：纯Bootstrap原生类实现（无自定义CSS，近似30%宽度） #

如果可以接受接近30%的比例，直接用Bootstrap原生栅格体系就能实现，不需要写任何自定义代码，栅格本身就天然支持「断点以下满宽、断点以上按比例占宽」的逻辑。12栅格体系下col-md-4对应md断点以上占父容器的1/3宽度（约33.3%），代码如下：

<body style="width: 100vw; height: 100vh">
  <div id="containerDiv" style="width: 100%; height: 100%" class="row g-0">
    <div id="canvasDiv" class="col-md-4"></div>
  </div>
</body>

实现逻辑说明：

• 父容器添加row g-0类：row是栅格的行容器，会为子元素创建正确的flex布局上下文，g-0用于移除栅格默认的槽位间距，避免子元素宽度计算出现偏差
• 子元素添加col-md-4类：md断点以下col-md-*类不生效，div作为块级元素自动占满父容器100%宽度；md断点及以上，子元素占12栅格中的4份，也就是父容器宽度的33.3%
• 不需要额外加margin调整类，栅格自带的布局规则会自动处理对齐

方案2：精确30%宽度实现（无Sass依赖，仅需3行自定义CSS） #

如果必须严格实现30%宽度，不需要修改Bootstrap源码、不需要Sass编译，只需要按照Bootstrap的断点规则写一段匹配md断点的媒体查询即可。Bootstrap md断点的触发阈值为min-width: 768px，完整代码如下：

<!-- 先引入Bootstrap CSS文件 -->
<style>
@media (min-width: 768px) {
  #canvasDiv {
    width: 30%;
  }
}
</style>
<body style="width: 100vw; height: 100vh">
  <div id="containerDiv" style="width: 100%; height: 100%">
    <div id="canvasDiv"></div>
  </div>
</body>

实现逻辑说明：

• div作为块级元素，默认宽度就是父容器的100%，天然满足小屏满宽的需求
• 媒体查询仅在屏幕宽度≥768px（即Bootstrap定义的md及以上尺寸）时生效，覆盖默认宽度为父容器的30%
• 自定义样式放在Bootstrap CSS引入之后即可正常生效，不侵入框架原有代码

掌握以下几个核心规则，就能灵活应对绝大多数Bootstrap响应式布局需求，不需要硬背类名：

• Bootstrap所有响应式类统一遵循{属性标识}-{断点标识}-{属性值}的命名规则，所有带断点前缀的样式，仅在对应断点及更大屏幕尺寸下生效，更小尺寸下回退到元素默认样式或者无断点前缀的基础类样式。
• 使用类之前先明确它的设计场景：container/container-*类族定位是页面最外层的固定宽度居中容器，天生带断点以上的固定max-width设置，不适合用来实现相对父元素的百分比宽度；内部分栏布局优先用栅格（row/col）体系，特殊比例宽度通过自定义媒体查询实现即可。
• Bootstrap的所有断点阈值是公开固定的，从小到大依次为：sm(576px)、md(768px)、lg(992px)、xl(1200px)、xxl(1400px)，自己写自定义媒体查询时直接套用这些阈值，就能保证自定义逻辑和Bootstrap原生组件的响应式触发时机完全一致。
• 普通块级元素（div、section等默认display: block的元素）默认就会占满父容器的100%可用宽度，所以小屏满宽的需求很多时候不需要额外添加宽度类，只要不给元素写死固定宽度，天然就能满足小屏适配要求。

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