Question

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

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

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

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

Answer 1

您是否试图将div.dropshadow对齐？

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

的对齐方式

一个解决方案是：为padding: 0 50px的父级设置填充（前div.dropshadow）（现在它是＆lt; body＆gt;），

并为display: block设置div.dropshadow。

请在您的项目中尝试。看起来它适用于小提琴。

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

1 个答案: