Question

我有一个css类：

.content-shadow {
box-shadow: 0 0 5px #888888 !important;
}

我正在将此课程用于文件中的位置：

<div class="root-content-padder">

    <div class="container">

        <h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>

        <div class="content-shadow">

            <div class="text-center st-padding">
                <iframe style="width: 50vw; height: 430px"
                        src="youtube.com...."></iframe>

            </div>
            <div class="text-center st-padding">
                <button class="btn btn-default btn-lg">Text</button>
                <strong>Or</strong>
                <button class="btn btn-default btn-lg">Text</button>
            </div>

        </div>
    </div>

    <div style="height: 25px;"></div>
    <div class="container">
        <div class="content-shadow">

                <div class="col-lg-4">
                    <h1>LoL</h1>
                </div>
                <div class="col-lg-8">

                    <p>Text</p>
                    <br/>
                    <a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
                </div>
        </div>
    </div>
</div>

现在第一个具有class content-shadow的div工作正常，没有问题，但在第二个div上没有出现阴影。我可以在第二个上显示阴影，如果我删除了两个div <div class="col-lg-4">...</div>和<div class="col-lg-8">...</div>

这是非常奇怪的，我不知道为什么，也许这里有人可以提供帮助。关心Liz3

Answer 1

如果从调试工具中删除任何样式，则表示它在运行时对您的样式进行评论 。

当您使用external style时，如果从调试工具中删除它，它会对content-shadow中编写的样式进行注释，因此您使用content-shadow的地方无效。< / p>

但是，如果您使用inline-style并在两个不同的box-shadow中应用div，然后从调试工具中移除box-shadow中的任何一个，则只需评论您的{{1}在运行时该特定internal-style的另一个将起作用

所以，这是正常行为

来到您的第二点，div删除col-lg-*

它正在使用box-shadow，因为您可以看到该代码段。但是底部的阴影不可见，要使其显示在col-lg-*的父元素中应用padding-bottom: 10px;。

content-shadow

.content-shadow {
  box-shadow: 0 0 10px darkgreen !important;
}

Answer 2

所以解决方案很简单：

我必须在

之后添加<div style="clear: both;"></div>

 <div class="col-lg-4">
    <h1>LoL</h1>
  </div>
  <div class="col-lg-8">

    <p>Text</p>
    <br/>
    <a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
  </div>

Bootstrap Class col-lg ...删除box-shadow

2 个答案: