如何在不影响正文背景的情况下使用 Bootstrap 4 编写表单？

Question

我正在使用 Bootstrap 4 来设置我的网站的样式，但问题是我已经有一个 CSS 文件，其中包含背景中的背景颜色和图像，在我链接 bootstrap 4 后，它破坏了样式和背景变成白色，就像隐藏了原始背景一样。

如何在不影响背景的情况下创建表单？

在下图中，原始背景颜色是天蓝色，但一旦我包含 Bootstrap 链接，它就会部分覆盖颜色。

Answer 1

也许你可以展示一些你的代码。这是我放入容器中的引导程序表单的示例。如果您想看一下，下面有 Codepen 链接：

<div class="container box">
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

</div>

Here an example Bootstrap form on sky blue background