Question

我试图制作一个简单的CSS文件，让我的应用看起来不错，但我遇到了问题

<div class='container-fluid'>
<div id="nav">
        <div class='col-sm-6' align="center">
                <h2>Utwórz nową sesje</h2>
                <br><br>
                <input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
                <a class="btn btn-primary btn-md" href="#" role="button">Stwórz</a>
            </div>

        <div  class='col-sm-6' align="center">
            <h2>Dołącz do istniejącej sesji</h2>
            <br><br>
            <input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
            <a class="btn btn-primary btn-ms" href="#" role="button">Dołącz</a>
        </div>

</div>

无论我是否成功

#bootstap-overrides  .container-fluid {
    background-color: #3b5998;
}

或者

.container-fluid {
    background-color: #3b5998;
}

或

.nav {
    background-color: #3b5998;
}

背景仍然是白色的，好像bootstrap正在覆盖它。我是CSS的beggineer。

编辑：

@Component({
selector: 'home',
templateUrl: './home.component.css'})

templateUrl字段错误，所以我修复了它。但是，现在整个网站都显示为白色。

Answer 1

你应该像这样组织你的CSS链接

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css"/>

首先是Bootstrap文件，然后是你的自定义css文件

Answer 2

如果您想将整个班级更改为“.container-fluid”，您可以添加标签！important。

e.g：

p momentList[7].localizedTitle == nil
(Bool) $R2 = true

但在大多数情况下，建议您像创建子元素一样创建子元素。您必须在css中使用“nav”元素，如下所示：

.container-fluid {
background-color: #3b5998 !important;
}

您必须使用'＃'而不是'。'，因为您将其声明为ID而不是CLASS元素

覆盖引导样式，无法正常工作

2 个答案: