-2
我使用flex-column並將頁面分成兩個部分，這樣當頁面被調整大小時，右側列可以移動到左側部分下方。但是現在右列的圖像重疊。 這是我用於這兩個部分的代碼。一些引導列重疊
<div class="container">
<!-- section on the left -->
<section class="flex-column col-lg-6 one">
<header class="logo">
<img src="images/Visit_Ms_8_gray.png" alt="" width="382" height="119" />
<h1 id="civil">Civil Rights</h1>
</header>
\t <div class="p-2">
\t \t <h1>Play Now</h1>
<div class="info">
<p style="display:inline-block;">Civil Rights Museum<br><span class="subtext">Jackson</span></p>
<button class="button" style="display:inline-block; ">Get Tickets</button>
</div>
<iframe width="560" height="294" src="https://www.youtube.com/embed/9zrFH-hWaXA" style="background-image:url(images/video_b.jpg)" >
</iframe>
\t </div>
<div class="col-lg-6">
<p class="subcopy">Concert Schedule at the Historic Alamo <span class="subtext">Jackson</span></p>
<img src="images/img1.jpg">
</div>
\t \t \t \t \t <div class="col-lg-6">
\t \t \t \t <p class="subcopy">Cleveland Buckner Art Show at JSU <span class="subtext">Jackson</span></p>
<img src="images/img2.jpg">
\t
\t </div>
\t \t <div class="col-lg-12">
\t \t \t <div class="book"><button class="button2">Book Now</button><p>Westin Downtown Jackson</p> </div>
\t \t \t <div class="book"><button class="button2">Book Now</button><p>Hotel King Edward</p></div>
\t \t \t <div class="book"><button class="button2"> Listen </button><p>Roadtrip Playlist on Spotify
</p></div>
</div>
</section>
\t
\t
\t
\t
\t <!-- section on the right -->
\t <section class="flex-column col-lg-6 two">
\t \t <header align="right">
<h1>Play More</h1>
<img src="images/arrow.png" />
</header>
<div class="p-2">
<div class="flex-item col-lg-6" >
<h1 id="later">Play Later</h1>
<div class="infob">
<p style="margin-bottom: 16px;">Mississippi Freedom Trail <span class="subtext">Multiple</span></p>
<img src="images/img3.jpg">
</div>
</div>
<div class="flex-item col-lg-6">
<h1 id="laterb">.</h1>
https://stackoverflow.com/posts/46837049/edit#<div class="infob" >
<p style="margin-bottom: 16px;">Mississippi Freedom Trail <span class="subtext">Multiple</span></p>
<img src="images/img4.jpg">
</div>
</div>
</div>
\t \t \t \t \t <div class="flex-item">
\t \t \t \t <p class="subcopy">Bestonia Blues Festival <br> <span class="subtext">Bestonia</span><br></p>
<img src="images/img5.jpg" width="560px" height="294">
\t \t \t </div>
\t \t \t \t <div class="flex-item">
\t \t <p id="insta_text">Instagram Freed</p>
\t \t \t <img src="images/instrampic.jpg"/>
\t \t </div>
\t \t
\t </section>
</div>http://rameyagency.com/clients/tourism/landingpg/version2/index.html 一些圖像重疊。
這是建議我使用flexbox和分成兩部分。
您需要閱讀http://getbootstrap.com/docs/4.0/layout/overview/以瞭解引導程序佈局是如何工作的。然後，在瞭解其工作原理後，編輯您的帖子並提出實際問題，告訴我們您嘗試了什麼，並考慮發佈一些相關代碼。 – bwoogie
我被給了幾天想出一個着陸頁，所以我選擇引導，我一直在試圖建立網站。我使用了flex-column，並將頁面分成兩部分，這樣當頁面調整大小時，右列可以在左側部分下移動。但是現在右列的圖像重疊。 – tania