在那是容器流体的课程中，我可以对顶部和底部进行填充，但是对左右不起作用？
赛米
我正在使用bootstrap-5。我找不到解决方案。这如何适用于顶部和底部，而不适用于左和右？你能帮我么？好的，默认情况下，bootstrap可能有一个值，但是我在CSS上进行了更改。因此，我认为在那里写的东西一定奏效了。我该如何运作？
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 3rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html> XxSTREKxX
这是因为CSS不会覆盖默认的引导CSS。 
因此，请使用下面给出的代码并覆盖
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15% !important;
}
h1 {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 3rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
顶部填充和底部填充不起作用
- 2
填充物在bootstarp 4.5 v中的流体容器中不起作用
- 3
自动边距在css的顶部和底部不起作用
- 4
jQuery .css（）顶部和底部不起作用
- 5
Bootstrap表tr边框顶部和底部不起作用
- 6
为什么我的Kivy BoxLayout在代码的顶部不起作用，而在底部的顶部却起作用？
- 7
CSS中的过渡效果“顶部与底部”不起作用
- 8
我的“菜单”类没有粘在屏幕顶部，并且在我进行填充时高度自动不起作用
- 9
销毁路径在注释中不起作用，但是我可以创建注释
- 10
销毁路径在注释中不起作用，但是我可以创建注释
- 11
rsync不起作用，但是ssh和scp可以
- 12
高度100％，底部填充不起作用
- 13
我正在制作一个可以进行随机数学运算的程序，但是它不起作用
- 14
在Matlab中填充顶部和底部的圆柱
- 15
为什么当我滚动底部时无限滚动不起作用，而是在滚动顶部触发？
- 16
我可以删除自定义NSMenu的顶部和底部填充吗？
- 17
将容器流体固定在固定顶部和固定底部之间
- 18
我的括号底部面板不起作用
- 19
我画出图像中最大的轮廓。但是用颜色填充它不起作用。任何想法？？
- 20
我的反应状态在函数中不起作用，但是在呈现时起作用
- 21
slideUp（）和slideDown（）不起作用，但是slideToggle（）起作用
- 22
slideUp（）和slideDown（）不起作用，但是slideToggle（）起作用
- 23
当我尝试暂停并在jsFiddle中播放时，我的代码可以工作，但是在我的html页面中不起作用
- 24
我正在使用Xcode 7和Swift，但是我的控件拖动操作不起作用
- 25
我正在RequireJS网站上进行循环引用的说明，但是它不起作用
- 26
我正在RequireJS网站上进行循环引用的说明，但是它不起作用
- 27
Ping不起作用，但是我可以浏览互联网
- 28
我的按钮曾经可以使用-但是现在不起作用了
- 29
我可以通过SSH进入服务器，但是HTTP根本不起作用？
我来说两句