仅仅加载引导程序就破坏了动画参数

【问题标题】：Merely loading bootstrap is breaking animation parameters仅仅加载引导程序就破坏了动画参数
【发布时间】：2022-01-13 11:43:51
【问题描述】：

我正在尝试实现一个在网上找到的用于掷骰子的前端代码。

代码可以在这个仓库找到：https://codesandbox.io/s/xjk3xqnprw?file=/styles.css:0-4535

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dice Roll</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="dice">
      <ol class="die-list even-roll" data-roll="1" id="die-1">
        <li class="die-item" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
      <ol class="die-list odd-roll" data-roll="1" id="die-2">
        <li class="die-item" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
    </div>
    <button type="button" id="roll-button">Roll Dice</button>
    <script src="./app.js"></script>
  </body>
</html>

CSS：

* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  font-family: system-ui, sans-serif;
}
body {
  background: linear-gradient(#545454, #454545, #676767);
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}
.dice {
  align-items: center;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  grid-template-rows: auto;
  justify-items: center;
  padding: 2rem;
  perspective: 600px;
}
.die-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 6rem;
  list-style-type: none;
  transform-style: preserve-3d;
  width: 6rem;
}
.even-roll {
  transition: transform 1.5s ease-out;
}
.odd-roll {
  transition: transform 1.25s ease-out;
}
.die-item {
  background-color: #fefefe;
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  width: 100%;
}
.dot {
  align-self: center;
  background-color: #676767;
  border-radius: 50%;
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
  display: block;
  height: 1.25rem;
  justify-self: center;
  width: 1.25rem;
}
.even-roll[data-roll="1"] {
  transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
  transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
  transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
  transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
  transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
  transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
  transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
  transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
  transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
  transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
  transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
  transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
  transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}
[data-side="2"] {
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="3"] {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}
[data-side="4"] {
  transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}
[data-side="5"] {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="6"] {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}
[data-side="1"] .dot:nth-of-type(1) {
  grid-area: five;
}
[data-side="2"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="2"] .dot:nth-of-type(2) {
  grid-area: nine;
}
[data-side="3"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="3"] .dot:nth-of-type(2) {
  grid-area: five;
}
[data-side="3"] .dot:nth-of-type(3) {
  grid-area: nine;
}
[data-side="4"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="4"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="4"] .dot:nth-of-type(3) {
  grid-area: seven;
}
[data-side="4"] .dot:nth-of-type(4) {
  grid-area: nine;
}
[data-side="5"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="5"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="5"] .dot:nth-of-type(3) {
  grid-area: five;
}
[data-side="5"] .dot:nth-of-type(4) {
  grid-area: seven;
}
[data-side="5"] .dot:nth-of-type(5) {
  grid-area: nine;
}
[data-side="6"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="6"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="6"] .dot:nth-of-type(3) {
  grid-area: four;
}
[data-side="6"] .dot:nth-of-type(4) {
  grid-area: six;
}
[data-side="6"] .dot:nth-of-type(5) {
  grid-area: seven;
}
[data-side="6"] .dot:nth-of-type(6) {
  grid-area: nine;
}

button {
  align-self: center;
  background-color: #efefef;
  border: none;
  color: #333;
  font-size: 1.25rem;
  font-weight: 700;
  justify-self: center;
  padding: 0.5rem 1rem;
}
button:hover {
  cursor: pointer;
}

@media (min-width: 900px) {
  .dice {
    perspective: 1300px;
  }
}

我尝试将代码合并到我的 Web 项目（使用 bootstrap5）中，但骰子图像渲染不正确。经过反复试验，我发现仅在与上述相同的页面中加载引导程序是导致错误的原因。页面呈现如下：

这个页面的渲染代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dice Roll</title>
    <link rel="stylesheet" href="./styles.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity="sha384- 
          EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
  </head>
  <body>
    <div class="dice">
      <ol class="die-list even-roll" data-roll="1" id="die-1">
        <li class="die-item" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
      <ol class="die-list odd-roll" data-roll="1" id="die-2">
        <li class="die-item" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
    </div>
    <button type="button" id="roll-button">Roll Dice</button>
    <script src="./app.js"></script>
  </body>
</html>

我想引导程序设置了一些导致这种行为的配置。谁能帮我识别它们，以便我可以在我的应用中覆盖它们并让动画正确显示？

【问题讨论】：

    标签： html css bootstrap-4 frontend bootstrap-5


    【解决方案1】：

    您的“问题”确实是引导样式。 添加此行以修复您的代码box-sizing: content-box;

    这里：

    * {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    box-sizing: content-box;
 }


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dice Roll</title>
    <link rel="stylesheet" href="./styles.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-
          EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">

    <style>
        * {
            margin: 0;
            padding: 0;
            vertical-align: baseline;
            box-sizing: content-box;
        }
        html {
            font-family: system-ui, sans-serif;
        }
        body {
            background: linear-gradient(#545454, #454545, #676767);
            display: grid;
            grid-template-columns: 1fr;
            height: 100vh;
            overflow: hidden;
            width: 100%;
        }
        .dice {
            align-items: center;
            display: grid;
            grid-gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
            grid-template-rows: auto;
            justify-items: center;
            padding: 2rem;
            perspective: 600px;
        }
        .die-list {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            height: 6rem;
            list-style-type: none;
            transform-style: preserve-3d;
            width: 6rem;
        }
        .even-roll {
            transition: transform 1.5s ease-out;
        }
        .odd-roll {
            transition: transform 1.25s ease-out;
        }
        .die-item {
            background-color: #fefefe;
            box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
            inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
            display: grid;
            grid-column: 1;
            grid-row: 1;
            grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            height: 100%;
            padding: 1rem;
            width: 100%;
        }
        .dot {
            align-self: center;
            background-color: #676767;
            border-radius: 50%;
            box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
            display: block;
            height: 1.25rem;
            justify-self: center;
            width: 1.25rem;
        }
        .even-roll[data-roll="1"] {
            transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
        }
        .even-roll[data-roll="2"] {
            transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
        }
        .even-roll[data-roll="3"] {
            transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
        }
        .even-roll[data-roll="4"] {
            transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
        }
        .even-roll[data-roll="5"] {
            transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
        }
        .even-roll[data-roll="6"] {
            transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
        }
        .odd-roll[data-roll="1"] {
            transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
        }
        .odd-roll[data-roll="2"] {
            transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
        }
        .odd-roll[data-roll="3"] {
            transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
        }
        .odd-roll[data-roll="4"] {
            transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
        }
        .odd-roll[data-roll="5"] {
            transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
        }
        .odd-roll[data-roll="6"] {
            transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
        }
        [data-side="1"] {
            transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
        }
        [data-side="2"] {
            transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
        }
        [data-side="3"] {
            transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
        }
        [data-side="4"] {
            transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
        }
        [data-side="5"] {
            transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
        }
        [data-side="6"] {
            transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
        }
        [data-side="1"] .dot:nth-of-type(1) {
            grid-area: five;
        }
        [data-side="2"] .dot:nth-of-type(1) {
            grid-area: one;
        }
        [data-side="2"] .dot:nth-of-type(2) {
            grid-area: nine;
        }
        [data-side="3"] .dot:nth-of-type(1) {
            grid-area: one;
        }
        [data-side="3"] .dot:nth-of-type(2) {
            grid-area: five;
        }
        [data-side="3"] .dot:nth-of-type(3) {
            grid-area: nine;
        }
        [data-side="4"] .dot:nth-of-type(1) {
            grid-area: one;
        }
        [data-side="4"] .dot:nth-of-type(2) {
            grid-area: three;
        }
        [data-side="4"] .dot:nth-of-type(3) {
            grid-area: seven;
        }
        [data-side="4"] .dot:nth-of-type(4) {
            grid-area: nine;
        }
        [data-side="5"] .dot:nth-of-type(1) {
            grid-area: one;
        }
        [data-side="5"] .dot:nth-of-type(2) {
            grid-area: three;
        }
        [data-side="5"] .dot:nth-of-type(3) {
            grid-area: five;
        }
        [data-side="5"] .dot:nth-of-type(4) {
            grid-area: seven;
        }
        [data-side="5"] .dot:nth-of-type(5) {
            grid-area: nine;
        }
        [data-side="6"] .dot:nth-of-type(1) {
            grid-area: one;
        }
        [data-side="6"] .dot:nth-of-type(2) {
            grid-area: three;
        }
        [data-side="6"] .dot:nth-of-type(3) {
            grid-area: four;
        }
        [data-side="6"] .dot:nth-of-type(4) {
            grid-area: six;
        }
        [data-side="6"] .dot:nth-of-type(5) {
            grid-area: seven;
        }
        [data-side="6"] .dot:nth-of-type(6) {
            grid-area: nine;
        }

        button {
            align-self: center;
            background-color: #efefef;
            border: none;
            color: #333;
            font-size: 1.25rem;
            font-weight: 700;
            justify-self: center;
            padding: 0.5rem 1rem;
        }
        button:hover {
            cursor: pointer;
        }

        @media (min-width: 900px) {
            .dice {
                perspective: 1300px;
            }
        }
    </style>
</head>
<body>
<div class="dice">
    <ol class="die-list even-roll" data-roll="1" id="die-1">
        <li class="die-item" data-side="1">
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
    </ol>
    <ol class="die-list odd-roll" data-roll="1" id="die-2">
        <li class="die-item" data-side="1">
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </li>
    </ol>
</div>
<button type="button" id="roll-button">Roll Dice</button>
<script src="./app.js"></script>
</body>
</html>

    【讨论】：

    • 太棒了！这肯定能完成任务！现在，假设我想将此代码插入到引导模板中的容器中。如何调整代码以使其正确呈现？添加 *{} 样式会弄乱整个页面，并且将 *{} 内的所有样式添加到容器中也不起作用。
    • 你可以添加这个： .dice *{box-sizing: content-box;} 你的类 dice 中的每个元素现在都有正确的 box-sizing
    • 成功了，非常感谢！
    猜你喜欢
    • 2016-06-05
    • 1970-01-01
    • 2016-11-24
    • 1970-01-01
    • 2013-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode