如何让这个 div 跨越整个宽度？答案

【问题标题】：How do I make this div span the entire width?如何让这个 div 跨越整个宽度？
【发布时间】：2016-05-16 23:04:45
【问题描述】：

我已经包含了这个：

<style>
html, body {
    padding: 0;
    margin: 0;
    font-family: Segoe UI;
}
</style>

下面是我所指的 div 的代码，包括其内容：

<div class="learn-more">
  <div class="container">
  <div class="row">
    <h1 style="color: #292f33;">SERVICES</h1>
    <div class="col-md-4">
      <h4>Delivery</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">At Gadget Market we offer free delivery for purchases prized over $300. Our delivery service is up to your doorstep or wherever you would like within the country.</p>
    </div>

    <div class="col-md-4">
      <h4>Warranty</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">Devices from Gadget Market come with not less than a 12-month warranty. Gadget issues within this period will be catered for and a replacement provided if need be.</p>
    </div>

    <div class="col-md-4">
      <h4>Money back Guarantee</h4><hr style="max-width: 70px;">
      <p style="text-align: center; font-size: 19px; font-family: Segoe UI;">If you are not satisfied with the product you bought from Gadget market, then you can return the gadget to us within 30 days for a 90% money back guarantee.</p>
    </div>

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

这是 CSS：

.learn-more {
  background-size: cover;
  width: inherit; 
  margin: 0;
  padding: 0; 
  background-color: rgba(85,172,238,0.8); 
}

.learn-more .col-md-4 h4 {
    font-family: Cambria;
    font-size: 26px;
    text-align: center;
    color: #292f33;
}

.learn-more .col-md-4 p {
    font-family: Segoe UI;
    font-size: 19px;
    text-align: center;
    color: #292f33;
}

但是 div .learn-more 仍然没有跨越整个宽度。而且我觉得这很奇怪，因为我在另一个项目中使用了完全相同的代码并且它有效！

下面的链接是图片：

The result

【问题讨论】：

您明确指的是哪个div？
您好-您能帮我们哪个 div 是“div”吗？上面的标记中有大约 6 个 div。此外，您能否建议其他样式，尤其是div.learn-more 和div.container？
我指的是 .learn-more div

标签： html css twitter-bootstrap

【解决方案1】：

这是一个引导问题。改变这个

<div class="container">

到这里

<div class="container-fluid">

并且（以防止水平滚动条）将<div class="learn-more"> 更改为<section class="learn-more">，根据这篇文章：

https://stackoverflow.com/a/35236594/1447509

请注意，典型的 Bootstrap 脚手架如下所示：

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    //content
                </div>
                <div class="col-xs-12 col-md-4">
                    //content col 2
                </div>
            </div><!-- .row -->
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    //content
                </div>
                <div class="col-xs-12 col-md-4">
                    //content col 2
                </div>
            </div><!-- .row -->
        </div><!-- .container -->
    </section>
</body>

【讨论】：

这是已知的引导情况。继续玩这个 - 我打赌你的问题与它有关。尝试调整您的 HTML 结构，使其更像我刚刚添加到更新答案中的脚手架。
让我生气的是，在不同的网站项目上，它却能完美运行！
这也很常见吗？没有任何改动或任何东西......它的工作原理！
您是说它现在可以工作，还是仍然有问题？如果仍然有问题，请尝试在bootply 上重现问题并发布链接。我们会继续努力帮助您解决问题。
您也可以尝试将<div class="row"> 更改为<div class="row-fluid">。值得一试...

【解决方案2】：

为设置宽度为 100% 的 div 制作样式代码

.learn-more {
  width:100%;
}

【讨论】：

看起来你的 div 从父元素继承了它的宽度。 div的父元素是什么，有什么样式？
哦，抱歉，不是。那应该是“宽度：100%；”我已经改变了它，但它仍然不起作用。

【解决方案3】：

请尝试

.learn-more,.learn-more .container{
  width : 100%;
  display: block;
}

【讨论】：

你能把你的代码放到网上并给我链接。我会在 1 分钟内解决。
其中一个 div 未被终止。非常感谢
抱歉，我没有足够的时间来解决这个问题，但很高兴听到你解决了它。

【解决方案4】：

您需要删除继承特征。 width: inherit 给出 100% 的父级。不是整个文件。要忽略宽度大于父项的典型限制，请执行以下操作。

.learn-more{
  position: absolute;
  width: 100%;
}

【讨论】：

我不会把这个作为答案，除非如果可行，但删除 h1，如果这不起作用删除所有学习更多的孩子，至少这样我们知道问题出在哪里。如果一个有效，告诉我，我会编辑答案。

【解决方案5】：

我建议像这样将padding 和margin 的!important 添加到选择器html, body 中：

html, body {
  padding: 0 !important;
  margin: 0 !important;
  font-family: Segoe UI;
}

如您的屏幕截图所示，我可以看到滚动条位于底部，因此您在顶部有更多的 div，可能还有更多的 CSS，所以如果有什么东西正在改变填充和边距值，那么现在它会得到纠正。您还应该检查您的 div 是否正确关闭并且在您的代码之前没有任何未关闭的 div，然后尝试将 overflow:hidden 添加到 .learn-more。

【讨论】：

Rakesh，你一定是看错了。我的底部没有滚动条
其中一个 div 尚未终止。谢谢！
对不起，我说错了，您的垂直滚动条已滚动到底部。我并不是说底部有水平滚动条。很高兴它有帮助！