【问题标题】:bootstrap row 100% width without horizontal scroll and adaptive on each sizebootstrap 行 100% 宽度,没有水平滚动和自适应每个尺寸
【发布时间】: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:

提前致谢。

【问题讨论】:

    标签: css twitter-bootstrap-3 grid


    【解决方案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

      【讨论】:

        猜你喜欢
        • 2011-05-16
        • 2014-01-25
        • 2012-04-05
        • 2015-06-21
        • 1970-01-01
        • 2015-09-03
        • 2012-07-13
        • 2013-07-08
        • 2014-10-14
        相关资源
        最近更新 更多