Question

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

<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;
}

我有一个像上面这样的解决方案，但是问题在于分辨率不同，水平滚动aper，有时边缘可见。

此结构是强制性的，因此我不能修改html结构，而仅需要CSS解决方案。

fiddle:

先谢谢了。

Answer 1

始终使用稳定版本的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>

PS：引导程序的最新版本是4.1.x

Answer 2

您可以使用此：

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

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

引导行100％的宽度，没有水平滚动，并且每种尺寸都自适应

2 个答案: