欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

為什么我的6個單元的列堆疊在12個單元的布局中？

CSS
錢斌斌1年前9瀏覽0評論

我試著創建一個容器，然后把它分成兩部分，工作時間占6列，另外6列用于地圖本身，但我希望它們都集中在頁面上。我想可能是因為我用完了列，這就是為什么地圖放在下面而不是旁邊。因此，我減少了列數，使用4列表示工作時間，6列表示地圖(還剩2列)，然后根據包含4列的父div進一步劃分時間列(因此，一周中的時間和日期各占2列，構成4列，但這似乎并不正確。

下面是我遇到問題的代碼片段:

<link rel="stylesheet"  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="maps-link">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <!--justify-content-center-->
      <div class="col-md-6">
        <h5 class="text-uppercase"> Working hours</h5>
        <div class="row">
          <div class="col-md-3">
            <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-3">
            <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>
        
        <div class="col-md-6">
          <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>

您有一個直接嵌套在列中的列。這是不正確的。通過在開始第二個元素之前簡單地關閉第一個列元素，我們解決了這個問題。

一個好的編輯器和適當的代碼格式使得發現這類問題變得更加容易。為了更好的可視化，我喜歡在兄弟塊級元素之間留空白。

<link rel="stylesheet"  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

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

        <div class="row">
          <div class="col-md-3">
            <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-3">
            <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>
      </div> <!-- NEW TAG -->

      <div class="col-md-6">
        <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>