Question

我正在尝试为该div赋予样式，但是，除了高度和宽度之外，没有CSS可以使用。我正在使用引导程序。

尽管在此代码编辑器中边框是红色的，但当我在Brackets中编辑时却不是。添加了更多代码。

entry2 = entry(url="hey")

body{
    padding: 100px 10% 0 10%;
}

#hero {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 750px;
    justify-content: space-around;
}

.card {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid red;
    border-radius: 7px;
}

.card-title-span {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    border-bottom: 1px solid grey;
}
.card-image {
    width:100%;
    height: 250px;
    background-color: dodgerblue;
}

.card-pricing-span {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-bottom: 1px solid grey;
}

.card-description-span {
    padding: 3%;
    font-style: italic;
}

[忽略此文本-需要将其放在此处，以便有足够的单词满足自动改装标准。]

Answer 1

因为.card是标准的BootStrap类。使用另一个类名或覆盖它。

Answer 2

首先，您应该注意引导程序或任何模板可能会应用于DIV的替代。

为此，请在浏览器上按F12并转到Elements选项卡，选择div，注意Style，您应该可以看到样式是否被破坏。如果不是这种情况，则很有可能您正在使用一堆 CSS属性，它们与display:flex和其他属性冲突。

为什么在我的div中，除了高度和宽度之外，其他CSS都不能工作？

2 个答案: