css 为什么我的6个单元的列堆叠在12个单元的布局中？

8iwquhpp 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(155)

我尝试创建一个容器，然后将其分为两个部分，工作时间占用6列，其他6列用于Map本身，但我希望它们都集中在页面上。我想也许是因为我用完了列，这就是为什么Map被放置在下面而不是旁边。所以我减少了列数，工作时间用4列，Map用6列（剩下2列），然后根据包含4列的父div进一步划分时间的列（这样一周的小时和天将占据2列，每列组成4列，但它似乎不正确。
下面是我遇到问题的代码部分的一个片段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 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>

css

来源：https://stackoverflow.com/questions/76262822/why-are-my-6-unit-columns-stacking-in-a-12-unit-layout

1条答案

按热度按时间

bihw5rsg1#

列直接嵌套在列中。这是不正确的。通过在开始第二个元素之前关闭第一个列元素，我们解决了这个问题。
一个好的编辑器和正确的代码格式可以让发现这类问题变得更容易。我喜欢在兄弟块级元素之间留空白，以获得更好的可视化效果。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 为什么我的6个单元的列堆叠在12个单元的布局中？

1条答案

相关问题

热门标签

最新问答