我希望图像位于 4 列中，但它落入 bootstrap 5 中的其他列中，并且我尝试了 img-responsive img-fluid 但它不起作用

问题描述 投票：0回答：1

定义的 4 个图像：其中三个图像位于 1 行，但第 4 个图像不断落入另一行 我尝试使用 margin o mx-0 或 px-0 但它只会减少其边距而不是其网格 错误消息：控制台中没有错误消息。

预期行为：我希望 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 css twitter-bootstrap responsive-design frameworks
1个回答
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-3
中使用 
col-lg-12
而不是 
row
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.