gpt4 book ai didi

html - 如何让这个 div 跨越整个宽度?

转载 作者:行者123 更新时间:2023-11-28 10:36:26 25 4
gpt4 key购买 nike

我已经包含了这个:

<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

最佳答案

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

关于html - 如何让这个 div 跨越整个宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37264584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com