如何在不影响主体背景的情况下使用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