Html 如何使此div跨越整个宽度？_Html_Css_Twitter Bootstrap

Html 如何使此div跨越整个宽度？

html css twitter-bootstrap

Html 如何使此div跨越整个宽度？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经包括以下内容： <style> html, body { padding: 0; margin: 0; font-family: Segoe UI; } </style> 但是div.learn more仍然没有覆盖整个宽度。我觉得这很奇怪，因为我在另一个项目中使用了完全相同的代码，而且它成功了下面的链接是图片：为div创建一个样式代码，将宽度设置为100% .learn-more { width:100%; } 这是一个引导问题

我已经包括以下内容：

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

但是div

.learn more

仍然没有覆盖整个宽度。我觉得这很奇怪，因为我在另一个项目中使用了完全相同的代码，而且它成功了

下面的链接是图片：

为div创建一个样式代码，将宽度设置为100%

.learn-more {
  width:100%;
}

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

<div class="container">

对此

<div class="container-fluid">

以及（为了防止出现水平滚动条）将

更改为

，请参见本文：

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

<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, body {
  padding: 0 !important;
  margin: 0 !important;
  font-family: Segoe UI;
}


//内容
//内容列2
//内容
//内容列2

请再试一次

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

您需要删除继承特征<代码>宽度：继承提供父级的100%。不是整个文件。要忽略宽度大于父项的典型限制，请执行以下操作

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

我建议添加

！重要信息

对于

padding

和

margin

到选择器

html，body

，如下所示：

<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, body {
  padding: 0 !important;
  margin: 0 !important;
  font-family: Segoe UI;
}

在你的屏幕截图中，我可以看到滚动条在底部，所以你在顶部有更多的div，可能还有更多的CSS，所以如果有什么东西改变了填充和边距值，那么它现在就被纠正了。您还应该检查您的div是否正确关闭，并且在代码之前没有任何未关闭的div，然后尝试将

溢出：隐藏添加到。了解更多
您明确指的是哪个div
？您好-您能帮助我们哪个div是“div”吗？上面的标记中大约有6个div。此外，您能否建议其他样式，特别是对于div.learn-more
和div.container
？我指的是.learn-more div它看起来像是您的div从父元素继承了它的宽度。什么元素是div的父元素，它有什么样式？哦，对不起，不是。这应该是“宽度：100%；”我已经更改了，但仍然不起作用。你能把你的代码放到网上并给我链接吗。我会在1分钟内解决。其中一个div没有终止。非常感谢。抱歉，我没能给这个问题足够的时间，但是很高兴听到你解决了这个问题。这是一个已知的引导情况。继续玩这个-我打赌你的问题与此有关。尝试调整你的HTML结构，使之更像我刚刚添加到更新答案中的脚手架。让我恼火的是，在另一个网站项目上，它工作得非常完美！这也很普遍吗？没有任何改动或任何东西…它可以工作！你是说它正在工作，还是仍然有问题？如果仍然存在问题，请尝试在链接上重现问题并发布。我们将继续帮助您修复它。您也可以尝试将
更改为
。值得一试…我不会把这作为一个答案，除非如果有效，但删除h1，如果不起作用，删除所有学习更多的孩子，至少这样我们知道问题在哪里。如果一个可行，告诉我，我会编辑答案。拉凯什，你一定看错了。底部没有滚动条，其中一个div未终止。谢谢对不起，我说错了，您的垂直滚动条已滚动到底部。我不是说底部有水平滚动条。很高兴它有帮助！