Bootstrap 侧空白
[英]Bootstrap side white space
问题描述
So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
所以对于一个学校项目，我正在制作一个网站，但是每当我使用容器和容器流体时，无论我使用什么，我都会在旁边留出这些空白空间，我不知道如何修复它们，所以我来这里寻求帮助。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container" id="nav"> <div class="row"> <div class="col-xl-12"> <div class="container-fluid" id="nav1"> <header class="nav-inverse"> <ul class="nav justify-content-center"> <div class="row"> <div class="col-xs-2"> <li class="nav-item"> <a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a> </li> </div> </div> <li class="nav-item"> <a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a> </li> <li class="nav-item"> <a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a> </li> </ul> </header> </div> </div> </div> </div> <div class="container" id="body"> <div class="row"> <div class="col-xl-2"> <div class="container fluid" id="body1"> <h1 id="Header1">Hello</h1> </div> </div> </div> </div> </body> </html>
I do hope I can find help here and thanks in advance!我希望我能在这里找到帮助，并提前致谢！
3 个解决方案
解决方案1
3 2020-03-27 19:02:39
Bootstrap adds in some spacing by default to container and container-fluid classes. Bootstrap 默认为container和container-fluid类添加一些间距。 To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.要删除这些，您可以通过使用{property}{sides}-{size}格式{property}{sides}-{size}其中 size 为 0）添加一个类来指定每个项目不需要填充/边距。
For example, to remove padding you can add a p-0 class.例如，要删除填充，您可以添加p-0类。 You can also remove a specific side:您还可以删除特定的一面：
-
pt-0toppt-0顶部 pr-0rightpr-0右pb-0bottompb-0底部pb-0leftpb-0左
Similarly, to remove margin you can add a m-0 class.同样，要删除边距，您可以添加一个m-0类。
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/有关间距的更多信息，请查看： https : //getbootstrap.com/docs/4.0/utilities/spacing/
解决方案2
1 2020-03-27 19:25:15
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters .要删除这些默认间距，可以使用.no-gutters删除引导网格类。
Here is an example这是一个例子
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters更多信息： https : //getbootstrap.com/docs/4.0/layout/grid/#no-gutters
解决方案3
0 2020-03-28 01:45:43
Not sure what you mean by white spaces, you might want to define with an image.不知道你说的空格是什么意思，你可能想用一个图像来定义。 If you mean that your body doesn't fill the page, the problem is nested container s.如果你的意思是你的身体没有填满页面，问题是嵌套的container s。 See comments below.请参阅下面的评论。
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.