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

时间:2016-05-16 23:04:46

标签: html css twitter-bootstrap

我已经包含了这个:

<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

5 个答案:

答案 0 :(得分:2)

这是一个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>

答案 1 :(得分:1)

为div设置样式代码,将宽度设置为100%

.learn-more {
  width:100%;
}

答案 2 :(得分:1)

请尝试

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

我建议将!importantpadding的{​​{1}}添加到选择器margin,如下所示:

html, body

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