Bootstrap 3 如何实现容器仅右侧全宽、左侧文本位置保持不变

思路说明 #

你原有代码中所有内容都包裹在Bootstrap自带的.container容器内，这个容器默认是居中定宽的，内部的列无法超出容器边界延伸到屏幕边缘。我们可以通过绝对定位的方式单独处理右侧背景块，既保留左侧文本在原容器内的位置不变，又能让右侧背景延伸到视口最右侧。

效果参考 #

新增CSS代码 #

/* 父容器设置相对定位，作为右侧背景块的定位参照，同时隐藏横向溢出 */
.hero {
  position: relative;
  overflow-x: hidden;
}

/* 行容器也设置相对定位，确保定位位置对齐网格 */
.row-split {
  position: relative;
}

/* 右侧背景块样式 */
.hero__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58.33333333%; /* 对应左侧col-sm-7占行宽的比例：7/12≈58.33% */
  width: calc(100vw - 58.33333333%); /* 视口总宽度减去左侧列占行的比例，刚好延伸到屏幕最右侧 */
  background-color: #ff0000; /* 替换为你需要的红色值 */
}

/* 小屏适配：屏幕宽度小于768px时列堆叠，恢复普通布局 */
@media (max-width: 767px) {
  .hero__background {
    position: static;
    width: 100%;
    min-height: 200px; /* 自定义小屏下背景块的高度 */
  }
}

完整代码示例 #

<!-- Bootstrap-3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
/* 父容器设置相对定位，作为右侧背景块的定位参照，同时隐藏横向溢出 */
.hero {
  position: relative;
  overflow-x: hidden;
}

/* 行容器也设置相对定位，确保定位位置对齐网格 */
.row-split {
  position: relative;
}

/* 右侧背景块样式 */
.hero__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58.33333333%; /* 对应左侧col-sm-7占行宽的比例：7/12≈58.33% */
  width: calc(100vw - 58.33333333%); /* 视口总宽度减去左侧列占行的比例，刚好延伸到屏幕最右侧 */
  background-color: #ff0000; /* 替换为你需要的红色值 */
}

/* 小屏适配：屏幕宽度小于768px时列堆叠，恢复普通布局 */
@media (max-width: 767px) {
  .hero__background {
    position: static;
    width: 100%;
    min-height: 200px; /* 自定义小屏下背景块的高度 */
  }
}
</style>

<!-- Body -->
<div class="hero">
  <div class="container">
    <div class="row row-split">
      <div class="col-sm-7">
        <div class="col-sm-12">
          <h2 class="hero__title primary-font dullblue">Some really cool text.</h2>
        </div>
        <div class="col-sm-12">
          <div class="hero__paragraph secondary-font">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="col-sm-12">
          <button class="hero__button secondary-font">Shop Now</button>
        </div>
      </div>
      <div class="col-sm-5 hero__background">

      </div>
    </div>
  </div>
</div>

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