- 首页
- 前端开发
- Bootstrap 4 容器流体不需要的边距
Bootstrap 4 容器流体不需要的边距
[英] Bootstrap 4 container fluid unwanted margins
本文介绍了Bootstrap 4 容器流体不需要的边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Bootstrap 4.2 在 html 中编写一个页面.我想在页面顶部有一个水平导航栏,它占据页面的整个宽度,并在导航过程中保持静态.
我尝试在容器流体"类中使用一些 div.问题是bar的左右两边出现了边距
这是我在 jsfiddle
中得到的示例
<div class="sticky-top shadow" id="containerMain"><div class="container-fluid bg-secondary text-light p-1"><div class="row align-items-center">第一行内容在这里
<div class="container-fluid filters bg-light align-items-center"><div class="row p-1">第二行内容在这里
有谁知道如何让这些不需要的边距消失?我尝试不使用容器流体"类,但随后边距出现在右侧,带有我也不想要的水平滚动条.
非常感谢您,
解决方案
container-fluid 的 padding-left 和 padding-right 为 15px,这就是你看到的差距.您可以通过添加类 px-0
来覆盖它,该类为左右填充 0.然后你必须用 mx-0
类覆盖行的 15px 边距.
但是如果它是你想要的导航,那么你应该使用的是 Bootstrap 的导航组件:https://getbootstrap.com/docs/4.1/components/navbar/
I'm writing a page in html using Bootstrap 4.2. I would like to have a horizontal navigation bar at the top of the page, that occupies the whole width of the page, and remains static during navigation.
I tried to use a few divs with the class "container-fluid". The problem is that a margin appears on the left and right side of the bar
Here is an example of what I get in jsfiddle
<div class="container-fluid">
<div class="sticky-top shadow" id="containerMain">
<div class="container-fluid bg-secondary text-light p-1">
<div class="row align-items-center ">
Line number one content here
</div>
</div>
<div class="container-fluid filters bg-light align-items-center">
<div class="row p-1">
Line number two content here
</div>
</div>
</div>
</div>
Does anyone know how to make these unwanted margins disappear? I tried without the "container-fluid" class, but then the margin appears on the right side, with a horizontal scroll that I don't want either.
Thank you very much in advance,
解决方案
container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0
which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0
class.
But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/
这篇关于Bootstrap 4 容器流体不需要的边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!