Q&A
『うまくいかず、レイアウトが崩れてしまいます』とは、具体的には何が起きていますか？
当方でご提示のコードを確認しましたが、問題がよくわかりませんでした。
headerのposition fixedがうまくいかず、レイアウトが崩れてしまいます。
html
1 <header> 2 <div class="header-container"> 3 <div class="row"> 4 <div class="header-left col-lg-6"> 5 <a href="#"><i class="fas fa-align-justify"></i></a> 6 <a href="#">概要</a> 7 <a href="#">準備</a> 8 <a href="#">マネープラン</a> 9 <a href="#">安全</a> 10 </div> 11 <div class="header-right col-lg-6"> 12 <div class="container"> 13 <a class="start-btn" href="#">はじめる</a> 14 <h3>$70,000</h3> 15 <p>予想月収</p> 16 </div> 17 </div> 18 19 </div> 20 </div> 21 </header> 22
css
1header{ 2 height: 80px; 3 background-color: white; 4 font-family:Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; 5 position: fixed; 6 top:0; 7 z-index: 1; 8} 9 10.header-container{ 11 width:90%; 12 margin: 0 auto; 13} 14 15 16.header-left a{ 17 font-size:14px; 18 font-weight: 600; 19 color:#484848; 20 padding-top:35px; 21 padding-bottom:35px; 22 padding-right:35px; 23 line-height: 80px; 24} 25 26.start-btn{ 27 background-color: #DB3742; 28 color:white; 29 border-radius: 4px; 30 display: inline-block; 31 padding:7px; 32 font-size: 14px; 33 font-weight: 600px; 34} 35 36 37.start-btn:hover{ 38 color:white; 39 text-decoration: none; 40} 41 42.header-right{ 43 margin: auto; 44} 45 46.header-right h3{ 47 font-size: 24px; 48 font-weight: 800; 49 color:#484848; 50 margin-bottom:0px; 51} 52 53.header-right p{ 54 margin-bottom:0; 55 font-size: 14px; 56 font-weight: 400; 57} 58 59 60 61/*flexbox*/ 62.container{ 63 display: flex; 64 flex-direction: row-reverse; 65 align-items: flex-end; 66} 67
flexboxやbootstrapと相性が悪いのでは？とか思っていますが原因を教えていただけると幸いです。
「どこ」が「どう」崩れているのでしょうか？
崩れている要素はどれですか？
どのように本来はしたいのでしょうか？
スクリーンショット等も併せて提示されると良いかと思います。
回答1件
0
どの部分を指しているのかはっきりしていませんが、とりあえず幅は指定したくなります。
CSS
1body { 2 padding-top: 80px; 3} 4 5header { 6 left: 0; 7 right: 0; 8}
Navbar ならそれを使えばいいのでは？
https://getbootstrap.com/docs/4.3/components/navbar/#placement
投稿2019/06/28 02:56
総合スコア13749
あなたの回答
tips
プレビュー
