为什么我的 DIV 元素的背景颜色不可见？

Question

/**This code doesnt change the color of the class row1**/

html, body {
  font-family :'montserrat',sans-serif;
  }
h1 {
  border-left  : 2px solid #00f28f;
  font-size    : 48px;
  font-weight  : 400;
  padding-left : 20px;
  }
.main {
  margin-top : 80px;
  }
form input {
  background : #F0f0f0;
  border     : none;
  font-size  : 36px;
  padding    : 20px;
  width      : 100%;
  transition : background 0s, border-left 0s;
  }
form input:focus {
  background  : #fff;
  border-left : 2pxsolid #000;
  box-shadow  : none;
  outline     : none;
  }
button.button {
  background : transparent;
  border     : none;
  color      : #00f2bf;
  cursor     : pointer;
  font-size  : 36px;
  padding    : 20px 24px;
  transition : background 0s, border-left 0s;
  }
button.button:hover {
  background : #00f2bf;
  color      :  #fff;
  }
.row1 {
  background : yellowgreen;
  }

<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<header class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-2 col-md-2">
        <h1>Kalyan The Coder</h1>
      </div>
    </div>
  </div>
</header>
<div class="main">
  <div class="container2">
    <div class="row1">
      <form class="form">
        <div class="col-xs-8 col-md-4">
          <input type="text" id="TextBox1" placeholder="Enter your query">
        </div>
        <div class="col-xs-4 col-md-2">
          <button type="submit" class="button">post</button>
        </div>

除了第 1 行的颜色没有改变且不确定原因之外，此命令工作正常。
如果我将 row1 更改为 CSS 上的行，header 的颜色会发生变化。我不确定如何更改 CSS 样式 sheet 中的 class。
我是初学者，想对此进行更多探索。

Answer 1

你需要给你的元素高度。

有助于简化问题。目前，如果您将 height: 100px 添加到您的 row1 class，背景将变成可见的 yellowgreen，如您所愿：

.row1 {
    background: yellowgreen;
    height: 100px;
}

让我们用一个简化的片段来展示不同之处：

.row-1 { background-color: yellowgreen; }
.row-2 {
  height: 100px;
  background-color: red;
}

<div class="row-1"></div>
<div class="row-2"></div>

注意你怎么在这里看不到 row-1？添加高度、填充或任何其他扩展 div 区域的内容将使其显示：

.row-1 { background-color: yellowgreen; }

<div class="row-1">
  <p>This should make the row visible.</p>
</div>

为什么我的 DIV 元素的背景颜色不可见？

Why is the background color of my DIV element not visible?

html

css

row

background-color