引导行重叠而不是堆叠

Question

我正在使用引导程序构建一个页面。这个想法是有不同的部分，每个部分在容器内使用引导行。

问题是，当我添加新行时，它们不是出现在前一行的下方，而是出现在它的后面。

据我了解，这些行应该显示在彼此下方，有人知道发生了什么吗？

问题照片：

document.addEventListener("DOMContentLoaded", function(event) {
  const image = new Image();
  image.src = document.getElementById("img-rocket").getAttribute("src");

  const explosion = new Image();
  explosion.src = document.getElementById("img-explosion").getAttribute("src");

  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");

  const colors = {
    leftMeasures: "#f00",
    borderColor: "#252e39",
    rocketLineColor: "#9c3d92",
    fontColor: "#51596a",
    textColor: "#fff",
    timerColor: "#1b2430",
    stopColor: "#e82b4a",
  };

  const GRAPH_TOP = 50;
  const GRAPH_BOTTOM = 350;
  const GRAPH_LEFT = 75;
  const GRAPH_RIGHT = 650;

  const GRAPH_HEIGHT = 350;
  const GRAPH_WIDTH = 650;

  const initialLines = () => [{
      x1: GRAPH_LEFT,
      y1: 265.5,
      x2: GRAPH_RIGHT,
      y2: 265.5,
      timer: "x1.25",
    },
    {
      x1: GRAPH_LEFT,
      y1: 80,
      x2: GRAPH_RIGHT,
      y2: 80,
      timer: "x1.5",
    },
    {
      x1: GRAPH_LEFT,
      y1: -10,
      x2: GRAPH_RIGHT,
      y2: -10,
      timer: "x1.75",
    },
  ];

  const initialState = {
    status: "running",
    loading: 500,
    speed_minus: 1,
    isStarted: false,
    id: 1,
    lines: [...initialLines()],
    line_curve: -210,
  };

  let game = {
    ...initialState
  };

  let rocket_y = GRAPH_BOTTOM - 10;
  let rocket_x = GRAPH_LEFT + 30;

  const data = [
    2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 40, 50,
    60, 70, 80, 90, 100,
  ];

  let timer = 1;

  function drawLine(time, bottom = 0) {
    game.lines = [
      ...game.lines,
      {
        x1: GRAPH_LEFT,
        y1: GRAPH_TOP + bottom,
        x2: GRAPH_RIGHT,
        y2: GRAPH_TOP + bottom,
        timer: time,
      },
    ];
  }

  function drawLoading(loading) {
    context.clearRect(0, 0, 1000, 1000);
    context.fillStyle = colors.timerColor;
    context.fillRect(
      GRAPH_WIDTH / 10,
      GRAPH_HEIGHT / 2,
      GRAPH_WIDTH / 1.15,
      50
    );

    context.fillStyle = colors.stopColor;

    const loadingPercent = loading / 500;
    const loadingWidth = (loadingPercent * GRAPH_WIDTH) / 1.18;

    context.fillRect(GRAPH_WIDTH / 9, GRAPH_HEIGHT / 1.9, loadingWidth, 30);

    context.fillStyle = "#fff";
    context.font = "500 1rem Segoe UI";
    context.fillText(
      "Começando em " + (loading / 100).toFixed(1).toString() + "s",
      GRAPH_WIDTH / 2.5,
      (GRAPH_HEIGHT + 60) / 2
    );

    window.requestAnimationFrame(drawGraph);
  }

  function drawGraph() {
    console.log(GRAPH_TOP);
    if (game.status === "loading") return handleLoading();
    // else if (game.status === "paused")
    //   return window.requestAnimationFrame(drawGraph);

    context.clearRect(0, 0, 1000, 1000);

    context.lineWidth = 2.5;
    context.lineCap = "round";

    context.font = "600 0.8rem Segoe UI";
    context.fillStyle = colors.fontColor;
    context.textAlign = "center";
    context.setLineDash([6, 5]);

    for (let line of game.lines) {
      context.beginPath();
      context.strokeStyle = colors.borderColor;

      context.moveTo(line.x1, line.y1);
      context.lineTo(line.x2, line.y2);

      context.fillText(line.timer, GRAPH_LEFT - 30, line.y1 + 5);
      context.stroke();

      if (game.status === "running") {
        /// Movimento e criação das linhas
        const speed =
          (line.y1 - GRAPH_BOTTOM) / GRAPH_HEIGHT / game.speed_minus;

        line.y1 -= speed;
        line.y2 -= speed;

        if (line.y1 > 120 && line.y1 < 125 && line.timer === "x2") {
          game.speed_minus = 2;

          game.lines = [{
            ...line
          }];
        } else if (line.y1 > 290) game.lines.shift();
      }
    }

    context.setLineDash([0, 0]);

    /// desenha a borda do gráfico
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = colors.borderColor;
    context.moveTo(GRAPH_LEFT - 10, GRAPH_BOTTOM);
    context.lineTo(GRAPH_RIGHT, GRAPH_BOTTOM);
    // context.lineTo(GRAPH_RIGHT + 25, GRAPH_TOP);
    context.fillText("1x", GRAPH_LEFT - 30, GRAPH_BOTTOM + 2);
    context.stroke();

    /// desenha a linha do foguete
    context.beginPath();
    context.lineWidth = 5;
    context.lineJoin = "round";
    context.strokeStyle = colors.rocketLineColor;

    if (game.status === "running") {
      if (rocket_y > GRAPH_TOP) rocket_y -= 0.5 * 1.2;
      if (rocket_x < GRAPH_RIGHT) rocket_x += 1 * 1.2;

      if (rocket_x > GRAPH_RIGHT / 2 && game.line_curve < -50)
        game.line_curve += 1;
    }

    context.moveTo(GRAPH_LEFT, GRAPH_BOTTOM);
    context.bezierCurveTo(
      GRAPH_LEFT,
      GRAPH_BOTTOM,
      GRAPH_BOTTOM + game.line_curve,
      GRAPH_BOTTOM - 30,
      rocket_x,
      rocket_y
    );

    // context.fillText(i + 1, (GRAPH_RIGHT / arrayLen) * i, GRAPH_BOTTOM + 25);

    context.stroke();

    console.log(game.status);
    if (game.status === "running")
      context.drawImage(image, rocket_x - 45, rocket_y - 30, 70, 70);
    else context.drawImage(explosion, rocket_x - 45, rocket_y - 30, 70, 70);

    drawText(
      timer.toFixed(2) + "X",
      game.status === "running" ? colors.timerColor : colors.stopColor,
      colors.textColor
    );

    if (game.status === "running") handleTimer();

    window.requestAnimationFrame(drawGraph);
  }

  // startGame();

  window.requestAnimationFrame(drawGraph);
  const defeatTime = Math.floor(Math.random() * (20000 - 5000 + 1)) + 5000;
  setTimeout(stopGame, defeatTime);

  function startGame(t) {
    if (game.isStarted) return;
    game = {
      ...initialState,
      lines: [...initialLines()]
    };
    game.status = "running";

    rocket_y = GRAPH_BOTTOM;
    rocket_x = GRAPH_LEFT;

    console.log(game);

    window.requestAnimationFrame(drawGraph);

    const defeatTime = Math.floor(Math.random() * (20000 - 5000 + 1)) + 5000;
    setTimeout(stopGame, defeatTime);
  }
  // });

  function drawText(text, bgColor, fontColor) {
    context.fillStyle = bgColor;
    context.font = "bolder 1.8rem Segoe UI";
    context.fillRect(
        (GRAPH_WIDTH - 80) / 2.2,
        GRAPH_HEIGHT / 2.5,
        GRAPH_WIDTH / 3.5,
        100
      ),
      (context.fillStyle = fontColor);
    context.fillText(text, (GRAPH_WIDTH + 50) / 2, (GRAPH_HEIGHT + 50) / 2);
  }

  function stopGame() {
    game.status = "paused";

    setTimeout(() => {
      game = {
        ...initialState,
        lines: [...initialLines()],
        status: "loading"
      };
    }, 5000);
  }

  function handleTimer() {
    const formatedTimer = Number(timer.toFixed(2));
    console.log(formatedTimer);
    data.includes(formatedTimer) ? drawLine("x" + formatedTimer) : null;

    timer += 0.0025;
  }

  function handleLoading() {
    game.loading--;
    timer = 1;

    if (game.loading <= 0) startGame(true);
    else drawLoading(game.loading);
  }
});

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
  --top-header-top-position: 1.5rem;
  --header-height: 3rem;
  --nav-width: 68px;
  --chat-width: 100px;
  --primary-color: var(--bs-primary);
  --secondary-color: var(--bs-secondary);
  --field-gray: var(--bs-field-grey);
  --field-grey-transparency: var(--bs-field-grey-transparency);
  --white-color: var(--bs-white);
  --body-font: 'Montserrat', sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100;
  --z-topbar: 101;
}

*,
::before,
::after {
  box-sizing: border-box
}

.top-header {
  width: 100%;
  height: var(--top-header-top-position);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background-color: var(--secondary-color);
  z-index: var(--z-topbar);
  transition: .5s;
  text-align: center !important;
}

.header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: var(--top-header-top-position);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background-color: var(--primary-color);
  z-index: var(--z-fixed);
  transition: .5s
}

.main-container-page {
  padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
  z-index: 5000;
}

.header_toggle {
  color: var(--primary-color);
  font-size: 1.5rem;
  cursor: pointer
}

.header_img {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden
}

.header_img img {
  width: 40px
}

.l-navbar {
  position: fixed;
  top: 0;
  left: -30%;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--primary-color);
  padding: .5rem 1rem 0 0;
  transition: .5s;
  z-index: var(--z-fixed)
}

.r-navbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  background-color: var(--primary-color);
  padding: 1rem 0 0 1rem;
  transition: .5s;
  z-index: var(--z-fixed);
  padding: 1rem 0 0 1rem;
}

.nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin-top: 5rem;
}

.nav_logo,
.nav_link {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  padding: .5rem 0 .5rem 1.5rem;
  text-decoration: none;
}

.nav_logo {
  margin-bottom: 2rem
}

.nav_logo-icon {
  font-size: 1.25rem;
  color: var(--white-color)
}

.nav_logo-name {
  color: var(--white-color);
  font-weight: 700
}

.nav_link {
  position: relative;
  color: var(--white-color);
  margin-bottom: 1.5rem;
  transition: .3s
}

.nav_link:hover {
  color: var(--white-color)
}

.nav_icon {
  font-size: 1.25rem;
}

.secondary-bs-color {
  color: var(--bs-secondary)
}

.white-bs-color {
  color: var(--white-color)
}

.show-left-nav {
  left: 0;
  width: calc(var(--nav-width) + 156px);
}

.show-right-nav {
  width: 100%;
}

.body-menu-pd {
  padding-left: calc(var(--nav-width) + 188px);
}

.body-chat-pd {
  padding-right: calc(var(--chat-width) + 1rem);
}

.chat-font {
  font-size: small;
}

.time-span-chat {
  font-size: smaller;
  color: var(--white-color);
}

#chatContainer {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
  overflow-y: scroll;
}

#chatContainer::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

.active {
  color: var(--white-color)
}

.active::before {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  height: 32px;
  background-color: var(--white-color)
}

.height-100 {
  height: 100vh
}

.float-icon-chat {
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: var(--secondary-color);
  color: var(--white-color);
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
  z-index: 100;
}

.coin-dropdown-item {
  color: var(--white-color);
}

.coin-dropdown-item:hover {
  color: var(--secondary-color);
  background-color: var(--field-grey-transparency);
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .header {
    height: calc(var(--header-height) + 1rem);
    padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
  }
  .header_img {
    width: 40px;
    height: 40px
  }
  .header_img img {
    width: 45px
  }
  .l-navbar {
    left: 0;
    padding: 1rem 1rem 0 0
  }
  .r-navbar {
    right: 0;
    padding: 1rem 0 0 1rem;
    width: 0;
  }
  .show-left-nav {
    width: calc(var(--nav-width) + 156px)
  }
  .show-right-nav {
    width: calc(var(--chat-width) + 156px)
  }
  .body-menu-pd {
    padding-left: calc(var(--nav-width) + 188px);
  }
  .body-chat-pd {
    padding-right: calc(var(--chat-width) + 156px)
  }
}


/* Media queries for conditional borders on games */

.game-col {
  border-left: none;
}

.game-block {
  border-bottom: none;
}

.game-top {
  border-top: 1px solid var(--white-color);
}

@media (min-width: 576px) {
  .game-col {
    border-left: 1px solid var(--white-color);
  }
  .game-block {
    border-bottom: 1px solid var(--white-color);
  }
  .game-top {
    border-top: none;
  }
}


/* crash game */

.crash-canvas {
  width: 100%;
  max-width: 750px;
  border-radius: 7px;
  background-color: #0f1923;
  margin: 0rem auto 2rem auto;
}


/* betting menu */

.bet-menu-buttons {
  width: 7vh;
  height: 7vh;
}

.bettor-table-item {
  border-bottom: 1px solid var(--white-color);
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
</head>

<body id="body-pd" style="">

  <!--Container Main start-->
  <img style="display: none;" src="./img/foguete.png" alt="foguete" id="img-rocket" />
  <img style="display: none;" src="./img/explosion.png" alt="explosion" id="img-explosion" />

  <div class="height-100 main-container-page">
    <div class="container h-100">
      <div class="row h-50 gx-0">
        <div class="col-12 col-sm-5 order-sm-1 order-2 bg-opacity-white bg-opacity-25 text-center game-top ps-5 pe-5 d-flex flex-column justify-content-evenly">
          <div class="input-group mb-3">
            <span class="border-0 bg-field-grey text-white fw-bold input-group-text">Amount</span>
            <span class="border-0 bg-field-grey text-white fw-bold input-group-text">TC</span>
            <input type="text" class="border-0 bg-field-grey text-white form-control" placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
          </div>

          <div class="d-flex justify-content-evenly align-items-center">
            <div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
              2X
            </div>
            <div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
              10X
            </div>
            <div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
              1/2
            </div>
            <div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
              +5
            </div>
            <div class="bet-menu-buttons bg-primary text-white fw-bold border border-primary border-4 rounded ms-2 me-2">
              +10
            </div>
          </div>

          <div class="d-flex flex-column justify-content-evenly align-items-center">
            <span class="text-white fw-bold mb-2">
                Auto stop
              </span>
            <input type="text" class="border-0 bg-field-grey text-white form-control border border-field-grey rounded-pill" placeholder="0.00 format" aria-label="auto stop">
          </div>

          <div class="d-flex flex-column mt-5">
            <button class="btn btn-secondary fw-bold border border-secondary rounded-pill">Bet</button>

            <button disabled class="btn btn-secondary fw-bold border border-secondary rounded-pill mt-5">Stop</button>
          </div>
        </div>

        <div class="col-12 col-sm-7 order-sm-2 order-1 bg-opacity-white bg-opacity-25 text-center game-col">

          <div class="d-flex h-80 game-block pt-4 ps-4 pe-4">
            <canvas class="crash-canvas" id="canvas" height="400px" width="700px"></canvas>
          </div>

          <div class="d-flex flex-column h-35 game-top ps-3 pt-3 pb-5">
            <div class="d-flex text-white fw-bold ms-1 mb-2">
              Last runs:
            </div>

            <div class="d-flex justify-content-start">
              <span class="badge bg-primary ms-1 me-1">2.37x</span>
              <span class="badge bg-primary ms-1 me-1">2.37x</span>
              <span class="badge bg-primary ms-1 me-1">2.37x</span>
              <span class="badge bg-primary ms-1 me-1">2.37x</span>
              <span class="badge bg-primary ms-1 me-1">2.37x</span>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-5 gx-0 bg-dark bg-opacity-25">
        <div class="col-12 mt-3 mb-3">
          <div class="d-flex justify-content-between">
            <div class="text-secondary ms-5" style="font-size: large"><span class="fw-bold">0 players</span> made their bets</div>

            <div class="text-white me-5" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
          </div>
        </div>

        <div class="col-12">
          <div class="d-flex justify-content-center">
            <table class="table-primary table-borderless w-90">
              <thead class="text-white fw-bold bg-field-grey" style="height: 6vh;">
                <th class="w-70">User</th>
                <th class="w-10">Bet</th>
                <th class="w-10">Multiplier</th>
                <th class="w-10">Profit</th>
              </thead>
              <tbody>
                <tr class="bettor-table-item text-white fw-bold">
                  <td>
                    Elon musk
                  </td>
                  <td>15 TC</td>
                  <td>4.00x</td>
                  <td>60 TC</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Container Main end-->
</body>

代表问题的小提琴：https://jsfiddle.net/aeo910rb/

第二行（出现在第一行后面的那个在小提琴中设置了 bg-dark 以便更容易看到发生了什么）

Answer 1

我相信是你的 fixed height 导致你的row 越界。它设置为400px，如果您响应，它确实超出了您的row。

您应该使用 relative height，因此画布设置为跟随其父大小而不是超出范围。

例如，您可以将画布放在height: 100% 中，并为画布的父级设置固定大小。这样一来，您的画布就不会越过其父级，因此...不会越过下面的行。

---

您在 responsive 上也有一点问题，有些元素不在 div 中。 left 和 right 两侧的 padding 过多，导致 div 太小而无法“消化”您的元素。也许您还可以修改具有蓝色投注按钮的flex div，使其成为row（或具有flex-wrap: wrap）的元素，而不是强制为一行。

这是flex-wrap 文档的链接：flex-wrap-MDN

如下图：