ホーム>source

私はブートストラップを使用して、セクションを次のように見せようとしています:それがどのように見えることになっているのか

私が抱えている問題は、緑の背景の上にある真ん中の白いブロックです。一番外側のdiv(パディング)に余分なクラスを追加しても何も表示されませんが、他のdivに追加すると、パディングの高さ100%ではなく、写真(申し訳ありません)とテキストのみが含まれます。私はz-indexを試しました:幅80%、高さ100%で999ですが、それは背景を少し台無しにします。

どうすればいいかわかりません。任意の助けいただければ幸いです。ありがとうございました。

HTML:

<前>ウィズウィズ

CSS:

<前>ウィズウィズ

https://jsfiddle.net/4agbp8tf/2/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="index.css" rel="stylesheet"/> </head> <body> <div class="padding attractionPad"> <div class="container attractionContainer"> <div class="row"> <div class="col-sm-6"> <img src ="img2.png"> </div> <div class="col-sm-6"> <ul class="attraction"> <li><h3>Ninja Course</h3></li> <li><h3>Indoor Bounce Arena</h3></li> <li><h3>Mechanical Wipeout Challenge</h3></li> <li><h3>Ziplining Fun</h3></li> </ul> </div> </div> </div> </div> </body> </html>
あなたの答え
  • 解決した方法 # 1

    コメントとして。このコンテナにはコンテンツ(行)が含まれているため、このCSSを.attractionContainerに追加する必要があります。

    あなたが「それがどのように見えることになっているのか」が欲しいなら。 あなたはパディングCSSを削除する必要があります

    ウィズウィズ
    

  • 解決した方法 # 2

    フルページのレスポンシブで中央揃えの動作の場合、以下のコード:

    ウィズウィズ
    
    ウィズウィズ
    

    html,body{ background-color: #EE870D; width:100%; height:100%; } .padding{ padding: 0px ; } /* remove class or this css */ .padding img{ width:100%; } .attractionPad{ background-color: #8FBA51; } .attraction{ color:blue; list-style:none; } .events li, .attraction li{ margin: 10px 0 50px 0; } .attractionContainer{ background-color: #fff; }

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ ruby on rails - 各doループのすべてのレコードを合計しますか?