Question

我有div使用多种样式

<div class="alert alert-secondary login-alert" role="alert">Please contract administrator to recieve credentials!</div>

其中alert和alert-secondary是默认bootstrap 4个样式，而login-alert只是一个简单的单行

.login-alert {
    font-family: 'Kavivanar', cursive;
}

如何将它组合成一种风格？问题是我只想在某些地方使用这种组合风格，我可能需要在某处使用纯alert或alert-secondary。

Answer 1

在bootstrap 4中，.alert的css是

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

和.alert-secondary

.alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

所以要将它们组合起来，请使用：

.login-alert-combined{
    font-family: 'Kavivanar', cursive;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

但我不知道将课程设置为＆＃34;警报提醒 - 辅助登录 - 警报＆＃34;当你想要使用所有3种风格时。

Answer 2

尝试连接css中的两个类

.alert.alert-secondary{
    font-family: 'Kavivanar', cursive;
}

请注意，这会将属性提供给同时包含div和alert类的alert-secondary个。{/ p>

检查this question，更好地解释它。

将多种CSS样式合二为一

2 个答案: