Bootstrap 3.3.7自定义网格：如何使.container下.col-md-6全屏宽度

嘿，别担心英语不好～我来帮你搞定这个Bootstrap网格的问题！

首先得搞清楚：Bootstrap的.container本身是有固定最大宽度和左右内边距的，.row带左右负margin，.col-md-*有左右padding，所以默认情况下所有列都会被container的宽度限制住，没法直接全屏。针对你的需求，我给你两个可行的方案：

方案1：将轮播组件移出.container（推荐） #

全屏内容本来就不适合放在带宽度限制的container里，调整一下结构会更合理，也不会破坏Bootstrap的布局逻辑：

<!-- 原来需要宽度限制的内容 -->
<div class="container">
  <div class="row">
    <div class="col-md-5">Some content</div>
    <div class="col-md-1">Empty</div>
  </div>
</div>

<!-- 全屏轮播单独放在外面 -->
<div class="full-width-carousel">
  <!-- 这里放你的轮播代码 -->
</div>

<!-- 后续需要宽度限制的内容 -->
<div class="container">
  <!-- ...其他内容... -->
</div>

然后给轮播加个简单的CSS，去掉多余的padding：

.full-width-carousel {
  width: 100%;
  padding: 0; /* 移除默认的内边距，让内容贴满屏幕 */
}

方案2：在container内强制突破宽度（不推荐，仅当必须保留原结构时用） #

如果一定要把轮播留在container的row里，就得用自定义CSS来突破限制，不过可能会带来一些布局小问题，需要额外处理：

首先给目标列加一个自定义类，比如full-width-col：

<div class="container">
  <div class="row">
    <div class="col-md-5">Some content</div>
    <div class="col-md-1">Empty</div>
    <div class="col-md-6 full-width-col">Carousel</div>
  </div>
</div>

然后添加以下CSS：

/* 基础样式，抵消container的内边距 */
.full-width-col {
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
  padding-left: 15px;
  padding-right: 15px;
}

/* 针对md及以上屏幕（对应col-md-6的断点），让列占满整个视口 */
@media (min-width: 992px) {
  .full-width-col {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    width: 100vw;
  }
}

/* 避免出现水平滚动条 */
body {
  overflow-x: hidden;
}

这里用vw（视口宽度单位）让列占满整个屏幕，负margin来抵消container的宽度限制，最后给body加overflow-x: hidden防止出现横向滚动条。

总的来说，方案1更稳妥，也符合Bootstrap的设计思路，建议优先尝试这个～

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