1

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

下面是它的样子：边框太接近内容。

这是我的 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/

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

4

1 回答 1

1

您是否要居中对齐您的div.dropshadow?

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

padding: 0 50px一种解决方案是：为您的父级设置填充（ex ） div.dropshadow（现在它是 <body>），

并display: block为您的div.dropshadow.

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

于 2016-11-07T08:55:50.677 回答