-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