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

Question

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

它是这样的: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，除非你认为有更好的东西。

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

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

Answer 1

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

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

一个解决方案是:为你的div.dropshadow(现在是)的父级设置padding(ex padding: 0 50px)，

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

请在您的元素中尝试。看起来它在 fiddle 中起作用。