我整理了这个网站: brudenellridingstables.com
基于此模板 - https://startbootstrap.com/template-overviews/creative/
我遇到的问题是页面右侧有一个空白区域。
我试过了
body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
这解决了空白问题但是 overflow-x: hidden; 行打破了导航栏的前/后行为,并导致 fa 图标进一步向下页面不显示。
有什么方法可以在控制页面主体的 overflow-x 的同时同时拥有导航栏和 fa 图标的功能?
或者我可以在 CSS 中做些什么来解决这个问题?
我对 CSS 中的父子动态不是很了解,除了导致右侧空白的 overflow-x 之外,是否还有其他原因?
我见过这个问题几次,但没有像我这样的导航栏。我认为回答这些问题会对其他人有所帮助,因为这会加深他们对 CSS 复杂性的了解。
谢谢!
最佳答案
页面中间有一个部分(在 header
之后)带有 class="row bg-primary"
.row
需要在 .container
或 .container-fluid
中。您看到的是 .row
上的 -15px
左/右 margin
,通常由 .container< 偏移
父级。
将该行包装在 .container-fluid
中。
关于html - body 在右侧显示空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43263529/