为什么我的按钮与列中的弹性框内联？

Question

我的按钮 与 flex-box 一致，元素应该在列中一个接一个地堆叠，对吗？

我在做一个计时器，所以有一行，其中有两列。

在一栏中有一个 image，在另一栏中有一个 heading，一个 flexbox（其中包含四个矩形）和一个按钮.

现在，我希望我的按钮低于我的计时器，但它与它一致。

HTML

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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stiks</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>


<body>


                <div class="container hero">
  <div class="row">
    <div class="portal col-md-12 col-lg-5">
      <img class="img-fluid" src="../assets/download (10).jpg">
    </div>

    <div class="col-md-12 col-lg-7 align-self-center">

      <h2><b>Timer</b></h2>

      <div class="d-inline-flex flex-nowrap">
        <div class="rect">
          <span class="days"></span>
          <p>Days</p>
        </div>

        <div class="rect">
          <span class="hours"></span>
          <p>Hours</p>
        </div>

        <div class="rect">
          <span class="minutes"></span>
          <p>Minutes</p>
        </div>

        <div class="rect">
          <span class="seconds"></span>
          <p>Seconds</p>
        </div>
      </div>

      <button class="btn-main" type="button">Start</button>

    </div>

  </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

CSS

:root{
    --yellow: #fff189;
    --grey: #444444;
    --off-white: #e6e6e6;
    --blue: #047db1;
    --pink: #6b093d;
    --green: #ccf0a9;
    --black: #000000;
}


h1{
    font-size: 4.2em;
}

h2{
    font-size: 1.75em;
}

*{
    font-family: 'Poppins', sans-serif;
}

.section{
    padding-right: 5vw;
    padding-left: 5vw;
    padding-bottom: 3em;
    padding-top: 3em;
}




/*------------------------------------hero section------------------------------------*/
.hero{
    min-height: 100vh;
    background-color: var(--yellow);
}

.timer{
    margin-bottom: 1em;
}


.rect{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    padding: 0.2em;
    border-radius: 0.5em;
    text-align: center;
    color: var(--off-white);
    background-color: var(--blue);
    height: 6.5em;
    width: 8em;
    min-width: 0;
}

.rect h1{
    font-size: 2.25em;
    font-weight: 700;
}


.btn-main{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    border-style: none;
    font-size: 1.1em;
    border-radius: 00.5em;
    background-color: var(--pink);
    color: var(--off-white);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-right: 1.8em;
    padding-left: 1.8em;
}

.btn-main:hover{
   background-color: var(--grey);
}

Answer 1

在 .btn-main class 中添加 display: block; css。访问：https://jsfiddle.net/ktv1frwu/

Answer 2

我根据浏览器的宽度测试了您的代码，它更改为内联并且有时在这些框下方。

添加

修复

display : 在你的 .btn-main 中阻塞 class

.btn-main{
display:block;
}

为什么我的按钮与列中的弹性框内联？

Why my button is inline with a flex box in a column?

html

css

twitter-bootstrap-3

bootstrap-4