时间戳

首页 > 解决方案 > 为什么我的引导卡长度不一致？

html - 为什么我的引导卡长度不一致？

问题描述

我正在做一个项目，要求我使用 html 引导类格式化特定的响应式设计，虽然我有我想要的格式，但我不明白为什么在页面的桌面渲染中我的行中的卡片不是以像素为单位的相同宽度。有人能弄清楚发生了什么吗？这是完整的 html 文档，以防万一由于某种原因错误出现在顶部，尽管我引用的部分从“！底部部分”开始。我不允许为这个项目编写自己的 css 代码，所以它只是 html。谢谢你们的时间。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <title>All about bears</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <header class="bg-info">
    <h1 class="pt-4 pl-5">All About Bears</h1>
    <p class="pb-4 pl-5">Read all about bears and what they're like.</p>
    <nav class="text-center mb-4 bg-light py-3">
      <a href="#" class="text-dark px-3">Home</a>
      <a href="#" class="text-dark px-3">About</a>
      <a href="#" class="text-dark px-3">Contact</a>
    </nav>
  </header>
  <main class="pl-4">
    <!--Top Section-->
    <div class="row px-lg-5 col-sm">
        <img class="img-fluid" src="https://placebear.com/490/480"/>
      <section class="col px-lg-5 row-sm">
        <h2 class="text-center py-3 mb-3">Bears are neat!</h2>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. djfid soox ejf jf dic ciciic deksj zjdklfdd. jsklddox jjifke sjzo.
        sdjidfox.
      </p>
      <p class="px-lg-5"> Ddod co e nfdklooox djfed sox dofdds f od poof fjso f  dfds. hejk didof sdjdof. dis
        sdidof dfjdsioxxoxodfd sjfo, eiw wod jjofdfdwo sdfo. jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf.
      </p>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. jdkdfjoejfds fjef sdfjo sod qpd fjoxf feea dsj sdf. dsjods jofej djozfjox.
      </p>
      <a class="pl-lg-5 pt-4 mt-4 text-dark" href="#">Source</a>
      </section>
    </div>
    <hr>
    <!--Bottom Section-->
    <div class="row justify-content-center">
      <!--First Row-->
      <div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
        <!--Card One-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/225"/>
          <p class="card-body">These bears are playing around</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Card Two-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/224"/>
          <p class="card-body">This bear is looking off into the distance</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Second Row-->
      </div>
      <div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
        <!--Card Three-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/223"/>
          <p class="card-body">This bear just found some food</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Card Four-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/222"/>
          <p class="card-body">This bear is one of our favorites</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

以下是一些说明像素差异的屏幕截图：

Img-of-pixels1 Img-of-pixels2

标签： htmlcsstwitter-bootstrapbootstrap-4row

解决方案

推荐阅读