Question

我已经包含了这个：

<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

Answer 1

这是一个Bootstrap问题。改变这个

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

Answer 2

为div设置样式代码，将宽度设置为100％

.learn-more {
  width:100%;
}

Answer 3

请尝试

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

Answer 4

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

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

Answer 5

我建议将!important和padding的{{1}}添加到选择器margin，如下所示：

html, body

在屏幕截图中，我可以看到滚动条位于底部，因此您在顶部有更多div，可能还有更多CSS，因此如果某些内容正在更改填充和边距值，那么现在它会得到纠正。您还应检查您的div是否正常关闭，并且在代码之前没有任何未公开的div，然后尝试将html, body { padding: 0 !important; margin: 0 !important; font-family: Segoe UI; }添加到overflow:hidden。

如何使这个div跨越整个宽度？

5 个答案: