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

【问题标题】：Why my button is inline with a flex box in a column?为什么我的按钮与列中的弹性框内联？
【发布时间】：2021-08-20 06:35:53
【问题描述】：

我的按钮与弹性框对齐，元素应该在列中相互堆叠，对吗？

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

一列有一个图片，另一列有一个标题，一个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);
}

【问题讨论】：

标签： html css bootstrap-4 twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

通过添加来修复它

显示：在您的 .btn-main 类中阻止

.btn-main{
display:block;
}

【讨论】：

如果你在 css 文件夹中的 css 文件比尝试第二个！
是正确的兄弟，因为我在CSS文件中定义了背景颜色。我可以看到应用于网站的背景颜色。如果结构不正确，则不会将颜色应用于背景。
哦！终于明白了这背后的实际困惑是什么。当您调整窗口大小时，有时按钮转到内联，有时在这些框下方。