1

コンテンツがドロップシャドウで囲まれた単純なブートストラップ Web サイトがあります。左右のドロップ シャドウをウィンドウの境界に近づけて配置し、コンテンツがぎゅうぎゅう詰めにならないようにしています。影の半径を大きくしたいのではなく、影の側面を左右の境界線に近づけたいだけです。

境界線がコンテンツに近すぎます。

ここに私の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/

ボックスの影が表示されるのに十分な大きさのウィンドウ幅を広げてください。モバイル ビューでは表示しないため、私の Web サイトでは問題ありません。

4

1 に答える 1

1

を中央揃えにしようとしていますdiv.dropshadowか?

margin: 0 auto;それを行うのに役立ちます。から値に変更するautoと、div は自動的に左揃えになります。(パディングは の配置には影響しませんdiv.dropshadow)

padding: 0 50px1つの解決策は次のとおりです。あなたの親にパディング（ex）を設定します（div.dropshadow現在は<body>です）、

に設定display: blockしますdiv.dropshadow。

あなたのプロジェクトで試してみてください。フィドルで動作するようです。

于 2016-11-07T08:55:50.677 に答える