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

Question

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

这是它的样子：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 的左右边距时，我弄乱了内容的位置。我希望内容保留在原处。我宁愿保留它作为显示：table，除非你认为有更好的东西。

这里是fiddle： https://jsfiddle.net/u1ph99pv/2/

确保将 window 宽度增加到足以显示框阴影，这在我的网站上不是问题，因为我不在移动设备视图中显示它。

Answer 1

您要居中对齐 div.dropshadow 吗？

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

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

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

请在您的项目中尝试。看起来它适用于 fiddle.

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

Decrease Box-Shadow Margin Without Changing Content Margin

css

margin

drop-shadow

twitter-bootstrap