在不更改內容邊距的情況下減少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）（現在它是< BODY>），

，並設置display: block您div.dropshadow。

請在你的項目中嘗試。看起來它在小提琴中奏效。