bootstrap 行 100% 宽度，没有水平滚动和自适应每个尺寸

Posted 2023-03-06

【中文标题】bootstrap 行 100% 宽度，没有水平滚动和自适应每个尺寸

【英文标题】：bootstrap row 100% width without horizontal scroll and adaptive on each size

【发布时间】：2019-01-13 02:37:21

【问题描述】：

大家好，我正在尝试添加一个容器，在该容器上我有一行和一列但全宽。

<div class="container">
    <div class="row">
    <div class="col-md-12">
    <h4>This is a heading</h4>
    <span>This is a span</span>
    </div>
    </div>
</div> 

.row
  background: orange;
  margin: 0 -50px;
  padding: 0 50px;

我有一个类似上面的解决方案，但问题是在不同的分辨率下水平滚动，有时边距也是可见的。

这个结构是强制性的，所以我不能修改html结构只需要一个css解决方案。

fiddle:

提前致谢。

【参考方案1】：

你可以用这个：

    @media (min-width: 768px)
      .container 
         max-width: 100%;
    

这将覆盖现在正在播放的原始最大宽度。可以肯定的是，您可以在没有媒体查询的情况下放置相同的 css 代码，因此它适用于所有屏幕分辨率。

【参考方案2】：

始终使用稳定版本的 boostrap。您目前使用的是 3.0.0 版本，boostrap 不支持该版本。

尝试使用引导版本 3.3.7 (https://getbootstrap.com/docs/3.3/getting-started/)

它提供了一个container-fluid 类，占满 100% 宽度

.row 
  background: orange;

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

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <h4>This is a heading</h4>
      <span>This is a span</span>
    </div>
  </div>
</div>

P.S.：最新版本的 bootstrap 是4.1.x