Bootstrap 行在小视口中出现在另一行前面

Question

我正在使用 bootstrap 5 开发前端。我正在使用网格系统使网站整体响应。

有一个问题我无法用我的代码真正理解。

我在一个容器内设置了两行，它们在桌面显示中工作正常，但是当我切换到手机视口时，其中一行出现在另一行之前：

桌面：

手机：

有人知道这里发生了什么吗？

我添加了一个较小版本的代码，第二行使用 bg-dark 使问题更清楚：

li {
  list-style: none;
  /* display: inline-block; */
}

.window {
  --items-number: 10;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  overflow-x: hidden;
  position: relative;
  width: calc(var(--items-number) * 130px * 100);
  height: 180px;
  right: 0px;
}

.wraper {
  position: relative;
  margin: auto;
  width: 100%;
  overflow-x: hidden;
  border-radius: 2px;
}

.roulette-list {
  padding-left: 0;
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0;
}

.roulette-list li {
  border-radius: 0.8rem;
  width: 110px;
  height: 100px;
  font-size: 3rem;
  font-weight: bolder;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 25px 0 0;

  display: flex;
  justify-content: center;
  align-items: center;

}

.roulette-list li:nth-child(even) {
  background-color: #262833;
  color: #fff;
}

.roulette-list li:nth-child(odd) {
  background-color: #b927ad;
  color: #262833;
}


.roulette-list-past {
  padding-left: 0;
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0;
}

.roulette-list-past li {
  border-radius: 0.8rem;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgba(255, 255, 255, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;

}

.roulette-list-past li:nth-child(even) {
  background-color: #262833;
  color: #fff;
}

.roulette-list-past li:nth-child(odd) {
  background-color: #b927ad;
  color: #262833;
}


.vegaz-roulette { 
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

.arrowup {
  position: absolute;
  bottom: 30px;
  right: calc(50% - 10px);
  z-index: 1;
  width: 0;
  height: 0;
  border-bottom: 15px solid #f3f705;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  display: none;
}

.line {
  position: absolute;
  bottom: 16px;
  right: calc(50% + 3px);
  z-index: 1;
  width: 5px;
  border-radius: 5px;
  background-color: #fff;
  height: 150px;
}

.arrowdown {
  position: absolute;
  top: 30px;
  right: calc(50% - 10px);
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 15px solid #f3f705;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  display: none;
}

@keyframes choosen {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
}

@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 {
    height: 90%;
    width: 100%;
    max-width: 750px;
    border-radius: 7px;
    background-color: #0f1923;
    margin: 0rem auto 2rem auto;
}

.game-row-height {
    height: 200px;
}

@media (min-width: 576px) {  
    .game-row-height {
        height: 500px;
    }
}



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

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

<!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" />
    <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>
    <script defer src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</head>

<body id="body-pd">
    <!--Container Main start-->
    <div class="height-100 main-container-page">
        
        <div class="container h-100">

            <div class="row gx-0 game-row-height">
                <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">
                                
                                <div class="wraper" id="wraper">
                                    <div class="arrowup"></div>
                                    <div class="arrowdown"></div>
                                    <div class="line"></div>
                                    <div class="window" id="window">
                                        <ul class="roulette-list">
                                        </ul>
                                        <ul class="roulette-list">
                                            <li class="vegaz-roulette"></li>
                                            <li><span>1</span></li>
                                            <li><span>2</span></li>
                                            <li><span>3</span></li>
                                            <li><span>4</span></li>
                                            <li><span>5</span></li>
                                            <li><span>6</span></li>
                                            <li><span>7</span></li>
                                            <li><span>8</span></li>
                                            <li><span>9</span></li>
                                        </ul>
                                    </div>
                                </div>

                    </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>

            <!-- Row for displaying bets -->
            <div class="row mt-5 gx-0 bg-dark">

                <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>

</html>

Answer 1

问题出在第一行classgame-row-height

<div class="row gx-0 game-row-height">

在您的 CSS 中，如果您的浏览器的视口宽度至少为 576 像素，则您将行高设置为 500 像素，这不是问题，因为所有内容都恰好适合该高度。

.game-row-height {
    height: 200px;
}

@media (min-width: 576px) {  
    .game-row-height {
        height: 500px;
    }
}

但是，在手机视口中，宽度小于 576px，行高设置为 200px。内容不适合该高度。 显示投注的行采用虚拟200px高度第一行作为位置本身的参考，而第一行的实际大小不同，因为它必须拉伸以适合所有内容，因此“重叠”。 something like this

我会增加您 CSS 的初始高度或完全删除 class 并让高度适应内容和视口，因为您正在使用 Bootstrap（已经responsive) 删除 class 是最好的。

Bootstrap 行在小视口中出现在另一行前面

Bootstrap rows appearing in front of one another in small viewports

html

css

grid-system

bootstrap-4