在不改变内容边距的情况下减少 Box-Shadow 边距

Question

我有一个简单的引导网站，其内容被阴影包围。我试图将左右阴影放置在更靠近窗口边框的位置，以使内容看起来不那么拥挤。我不想增加阴影半径，我只是想让阴影边靠近左右边界。

如下所示：Border is too close to content.

这是我的 HTML：

<div class="dropshadow">
  <div class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
        </div>
      </div>
    </div>
  </div>
</div>

这是我的 CSS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">

.dropshadow {
display: table;
margin: 0 auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

当我尝试添加填充或更改 .dropshadow 的左右边距时，我弄乱了内容的位置。我希望内容保持原样。我宁愿将其保留为 display: table，除非您认为有更好的东西。

这里是小提琴： https://jsfiddle.net/u1ph99pv/2/

确保将窗口宽度增加到足够大以显示框阴影，这在我的网站上不是问题，因为我不会在移动视图上显示它。

Answer 1

您是否尝试将您的div.dropshadow 居中对齐？

margin: 0 auto; 可以帮助您做到这一点。如果您从auto 更改为一个值，那么您的 div 将自动左对齐。 （填充不影响div.dropshadow的对齐）

一种解决方案是：为div.dropshadow 的父级设置填充（例如padding: 0 50px）（现在是

），

并为您的div.dropshadow 设置display: block。

请在您的项目中尝试一下。看起来它在小提琴中起作用。