2016-08-29 2 views
-3

Twitterのブートストラップを使用してウェブサイトを作成していて、ブラウザウィンドウのサイズを変更するときに問題が発生しました。私は、divsの両方にwidthheightを使用して、子をdivposition: absolute;、親をdivposition: relative;にすることはできません。ウィンドウのサイズを変更するときにディバイダが重複する

これは、コード

source code

私は表示するようにしようとしている要素は、PHP(マップ)を介して引っ張られ、これはそれが重なっているかです。

map overlaps div

私はHTML内のスタイリングをしているべきではありません実現が、私はあなたに1つの場所で詳細を見せたかったです。

+0

ようこそStackOverflow。最小、完全、および検証可能なサンプルの作成方法については、http://stackoverflow.com/help/mcveをご覧ください。 –

+0

スペルミスや文法ミスを編集して訂正していただき、ありがとうございます。とにかく似たようなコードを提供していないのは、ここでどうやってやっているかわからないからです。私はTwitter Bootstrapで作業しているので、問題に重大な影響を与えるPHP要素もあります。 。 – Mar1ak

+0

問題ありません。サイト上のヘルプセクション、ask/edit/answerテキスト領域の右上にある疑問符を調べて、コードや書式の書式を設定する方法を調べてください。より正確で明確な情報を伝えればするほど、多くの人があなたの問題を(一般的に)援助したいと思うでしょう。また、スクリーンショットコードを決して使用しないでください - 常にコピーしてコードブロックに貼り付けてください。 –

答えて

-1

あなたが掲示したコードの画像から得られるものは間違った順序でdivを入れ子にしています。クラスのパネルフッターはパネルのフッターになっているはずです。パネル見出しとパネルフッターの間、言い換えればパネル自体の内部にあること。また、PHPでエコーしている要素にクラスを与えることをお勧めします。コードを投稿してください。私は助けてくれることを嬉しく思っています。 Bootsrapパネルに関する詳細は、hereを参照してください。 私は通常、画像ではなくフォームボタンを保存するパネルを使用します。 これをコメントとして残しておきますが、どこでもコメントすることはできません。

+1

なぜこれが投票されたのですか? ありがとう、あなたのご意見は私が問題を解決するのを助けました。 パネルフッタークラスについては、パネルフッターまたはパネル見出しを使用するかどうかにかかわらず、divのスタイル設定が同じになると考えていると思います。 CSSや何かを使って他のスタイリングをした場合には、私はそれを混乱させたくありません...しかし、クラスを使用してマップスケールを作ることができました。 埋め込みレスポンス埋め込みレスポンス-16by9 好奇心旺盛なあなたのために@del cueto https://i.gyazo.com/b384c02a1d890ae4dea20bf93eaec7c5。png – Mar1ak

+0

正確な回答が得られていない場合、回答は投票不能になることが多く、ドキュメントへのリンクが付いていないことを奨励されており、十分に文書化されていない質問には回答しないでください。私はあなたの問題を解決するあなたの方法を見つけることがうれしいです。私は私の仕事のプライベートネットワークから抜け出すと、私は完全にリンクを確認します。 –

1

私は私がしても、マップは、Twitterのブートストラップが付属して2つのクラスを使用することにより、重複せずに拡張するために取得することができました

embed-responsive embed-responsive-16by9 

と呼ばれ、これは彼らのソースコード

.embed-responsive { 
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden; 
} 

    .embed-responsive-16by9 { 
    padding-bottom: 56.25%; 
} 

です手動で私のDivsをposition: relative;の親であるようにしようとしましたが、それはうまくいかなかったので、高さと詰め物についてです。応答していただきありがとうございます。この回答がより多くの人々に役立つことを願っています。

関連する問題