为啥我的按钮与列中的弹性框内联?
Posted
技术标签:
【中文标题】为啥我的按钮与列中的弹性框内联?【英文标题】: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);
【问题讨论】:
【参考方案1】:在 .btn-main 类中添加 display: block;
css。
访问:https://jsfiddle.net/ktv1frwu/
【讨论】:
【参考方案2】:我根据浏览器的宽度测试了您的代码,它更改为内联,有时在这些框下方。
通过添加来修复它
显示:在您的 .btn-main 类中阻止
.btn-main
display:block;
【讨论】:
如果你在 css 文件夹中的 css 文件比尝试第二个! 是正确的兄弟,因为我在CSS文件中定义了背景颜色。我可以看到应用于网站的背景颜色。如果结构不正确,则不会将颜色应用于背景。 哦!终于明白了这背后的实际困惑是什么。当您调整窗口大小时,有时按钮转到内联,有时在这些框下方。以上是关于为啥我的按钮与列中的弹性框内联?的主要内容,如果未能解决你的问题,请参考以下文章
为啥我不能从我的 DataFrame 中的“日期”列中提取月份的列? [复制]