html - Bootstrap 类 col-lg ... 删除框阴影

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>

现在第一个具有 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 不起作用。

但是如果你使用 inline-style 并在两个不同的 div 中应用 box-shadow 然后删除任何一个 来自调试器工具的 box-shadow，它只是在运行时评论那个特定 div 的 internal-style，而另一个将起作用

所以，这是正常行为

谈到你的第二点，col-lg-* 移除了 box-shadow

正如您在代码片段中看到的那样，它也与 col-lg-* 一起工作。但是底部的阴影不可见，要使其可见，请在content-shadow 的父元素中应用padding-bottom: 10px;。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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: 230px" 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" style="padding-bottom: 10px;">
    <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>