我希望图像是在4列，但它福尔斯在 Bootstrap 5和我triied img响应img流体，但它不工作

定义的4个图像：其中三个图像在1行中，但第4个图像一直落在另一行中我尝试使用margin o mx-0或px-0，但它只减少其margin not its grid错误消息：控制台中没有错误消息。
预期行为：我希望这4列在大屏幕上并排显示，在小屏幕上堆叠显示。
实际行为：列没有正确对齐。即使在较大的屏幕上，它们也会出现堆叠。
采取的步骤：
已重新编译官方Bootstrap文档以了解正确用法。已确保Bootstrap CSS已正确链接。已尝试不同的列类（col-md、col-lg等），但问题仍然存在。浏览器/设备信息：Windows 10上的Google Chrome。

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css" />
  <meta charset="utf-8" />
  <meta name="viewport" width="device=width-device" intial-scale="1" />
</head>

<body>
  <header>
    <h1> Web Design is Awesome!!!</h1>
    <nav>
      <a href="http://www.umich.edu/">University of Michigan</a>
      <a href="http://www.intro-webdesign.com/">Intro to Web Design</a>
    </nav>
  </header>

  <div class="container">
    <div class="row">
      <section id="left" class="col-lg-3 col-lg-3">
        <h2>Why I am taking this class</h2>
        <ol>
          <li>It is required.</li>
          <li>I already know it, easy A!</li>
          <li>My mom wants a webpage.</li>
        </ol>
      </section>

      <section id="center" class="col-lg-8 col-lg-8">
        <h2>Why I am at University of Michigan</h2>
        <div class="myClass col-lg-12">
          <h3> Ann Arbor</h3>
          <p>There are many excellent reason to attend the <a href="umich.edu">University of Michigan</a>. The academics are top-notch, the students are exceptionally good-looking, and for about six weeks out of the year the weather is almost pleasant.</p>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-lg-12 d-none d-lg-block mt-1 ">

              <img class="col-lg-3 m-n5 px-0img-responsive" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Football">

              <img class="col-lg-3 m-n4 px-0 img-responsive" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Solar Car">

              <img class="col-lg-3 m-n5 px-0 img-responsive" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="campus">

              <img class="col-lg-3  m-n5 px-0 img-responsive" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Football">

            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <footer>
    <p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

字符串
Bootstrap版本：Bootstrap 5.3.0

你需要像这样更新你的HTML。我假设你希望你的图像并排没有沟之间。虽然还有一些其他问题，以及你的HTML结构。但记住这个问题，我只是指这里的解决方案。

<div class="container">
    <div class="d-none d-lg-block mt-1">
        <div class="row">
            <img class="col-lg-3 img-fluid" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Football" />

            <img class="col-lg-3 img-fluid" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Solar Car" />

            <img class="col-lg-3 img-fluid" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="campus" />

            <img class="col-lg-3 img-fluid" src="C:\Users\STIP User\Downloads\motivation\video 1\image\topg.jpg" alt="Football" />
        </div>
    </div>
</div>

字符串
真实的问题是您在col-lg-12中使用了col-lg-3而不是row。

我希望图像是在4列，但它福尔斯在 Bootstrap 5和我triied img响应img流体，但它不工作

1条答案

相关问题

热门标签

最新问答