响应式布局问题：小屏幕下营业时间无法与大屏保持并排显示

我正尝试让代码实现响应式布局，使小屏幕下的布局与大屏一致，让日期和营业时间保持并排显示。

原始代码片段 #

<section class="maps-link">
      <div class="container-fluid">
        <div class="row align-items-center justify-content-center" > <!--justify-content-center-->
          <div class="col-md-5 text-center" id="operating-hours">
            <h5 class="text-uppercase py-5"> Working hours</h5>
            <div class="row">

              <div class="col-md-6">
                <p>Monday</p>
                <p>Tuesday</p>
                <p>Wednesday</p>
                <p>Thursday</p>
                <p>Friday</p>
                <p>Saturday</p>
                <p>Sunday</p>
              </div>
              <div class="col-md-6">
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
                <P>9:00 - 18:00</P>
              </div>
              <div class="operation-footer">
                <a href="#" class="btn float-center my-3">Book Now</a>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%207C9%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </div>
        </div>
      </div>
    </section>

解决方案 #

要实现小屏幕下日期和营业时间仍并排，只需调整Bootstrap的列类，并优化地图的响应式：

1. 修改列类：将日期和时间所在的col-md-6替换为col-6，这个类会让列在所有屏幕尺寸（包括小于576px的小屏幕）下都占据一半宽度，保持并排。
2. 响应式地图：给iframe包裹一个embed-responsive容器，确保地图在小屏幕下自动适配宽度，不会溢出。
3. 按钮居中优化：给operation-footer添加col-12类，确保按钮容器占满整行，再用d-flex justify-content-center替代无效的float-center，实现按钮居中。

修改后的完整代码 #

<section class="maps-link">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <div class="col-md-5 text-center" id="operating-hours">
        <h5 class="text-uppercase py-5"> Working hours</h5>
        <div class="row">
          <!-- 替换col-md-6为col-6，确保全屏幕尺寸下并排 -->
          <div class="col-6">
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
            <p>Saturday</p>
            <p>Sunday</p>
          </div>
          <div class="col-6">
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
          </div>
          <!-- 优化按钮容器，确保居中 -->
          <div class="operation-footer col-12 d-flex justify-content-center">
            <a href="#" class="btn my-3">Book Now</a>
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <!-- 添加响应式容器，适配小屏幕地图 -->
        <div class="embed-responsive embed-responsive-4by3">
          <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

内容的提问来源于stack exchange，提问作者Andrew