Question

EDITED :::::已经简化了试图找出问题所在。以下是我目前的情况：

检查元素（部分使用.navbar）：

@media (min-width: 768px)
.navbar {
border-radius: 4px;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
localhost/media="all"
.navbar {
border-radius: 0px;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white;
}

文本编辑器，我在pages.css.scss＆amp;我的application.css.scss

@import 'bootstrap';


.navbar {
    padding-top: 50px;
}

检查元素根本没有在填充顶部拾取此更改。另外我的application.css.scss在右下角说CSS，而我的pages.css.scss说右下角的Sass可能是问题吗？

Answer 1

这不是您正在编辑的CSS，而是具有SCSS扩展名的文件。即萨斯。但是在右下角，您将其编辑为CSS文件...单击此按钮将其更改为Sass。（如果您已在包管理器中安装了Sass）

问题是，你知道这是一个Sass文件，或者你只是希望创建一个CSS文件吗？

Answer 2

好吧，如果你想强制执行你的“罢工”风格，你可以使用!important声明。如：

.navbar {
  border-radius: 0px !important; 
  font-size: 16px;
  padding-left: 150px;
  padding-right: 150px;
  margin: 0px;
  background-color: white !important;
}

注意Boostrap在整个地方使用的媒体查询，尤其是对于像navbar这样的重要组件。这将影响所有屏幕宽度的样式。

如何编辑Bootstrap CSS

2 个答案: