Bootstrap 没有显示我的表单的背景颜色答案

【问题标题】：Boostrap is not displaying the background color of my formBootstrap 没有显示我的表单的背景颜色
【发布时间】：2017-07-27 22:08:00
【问题描述】：

我正在使用引导程序来设计我的表单，但它没有显示表单的背景颜色，就像在示例中那样。

应用了引导程序的所有字体颜色大小和设计，但我的表单的背景不见了。

我还复制并粘贴了示例中的所有代码，看看它是否会显示表单背景，但即便如此它也没有显示引导主题的背景颜色。

我在我的 html 文件中包含了 bootstrap.css 和 bootstrap.min.css。

这是我正在使用的主题：https://bootswatch.com/flatly/

HTML 代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="bootstrap.min.css">
  <title>Users</title>
 </head>
 <body>
  <form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
    <fieldset>
      <div class="form-group">
        <label for="inputUsername" class="col-lg-3 control-label">Username</label>
        <div class="col-lg-3">
          <input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword" class="col-lg-3 control-label">Password</label>
        <div class="col-lg-3">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-3">
          <button type="reset" class="btn btn-default">Reset </button>
          <button type="submit" class="btn btn-primary">Login </button>
        </div>
      </div>
    </fieldset>
   </form>
  </body>
 </html>

【问题讨论】：

把你赢得的 style.css 文件放在所有链接的底部

标签： html forms twitter-bootstrap css

【解决方案1】：

这样试试

<head>
  <meta charset="utf-8">
  <title>Users</title>
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="bootstrap.min.css">
  
  <!-- my style sheet -->
  <link rel="stylesheet" href="style.css">
</head>

【讨论】：

【解决方案2】：

fiedset标签前缺少代码：

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
       <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="bootstrap.min.css">
  <title>Users</title>
 </head>
 <body>

  <form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
    <div class="row">
          <div class="col-bs-6">
            <div class="well bs-component">
              <form class="form-horizontal">
    <fieldset>
      <div class="form-group">
        <label for="inputUsername" class="col-lg-3 control-label">Username</label>
        <div class="col-lg-3">
          <input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword" class="col-lg-3 control-label">Password</label>
        <div class="col-lg-3">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-3">
          <button type="reset" class="btn btn-default">Reset </button>
          <button type="submit" class="btn btn-primary">Login </button>
        </div>
      </div>
    </fieldset>
    </div>
    </div>
    </div>
   </form>
  </body>
 </html>

【讨论】：