时间戳

首页 > 解决方案 > 我的 css 在 bootstrap 4 中不起作用我该如何解决？

html - 我的 css 在 bootstrap 4 中不起作用我该如何解决？

问题描述

在此处输入图像描述

我是 bootstrap 4 的初学者。我想更改这张卡片图像的背景。但我的 CSS 不工作。这里可能是什么问题？我尝试了很多方法，但找不到任何解决方案。请帮我。

这是我的 index.php 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChessStation</title>
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 

  
</head>
<body>

     <div class="container">
         <div class="row text-center py-5">
            <div class="col-md-3 col-sm-6 my-3 my-md-0">
                <form action="index.php" method="post">
                     <div class="card shadow">
                          <div>
                               <img src="./img/p1.jpg" alt="image1" class="img-fluid card-img-top">
                          </div>
                          <div class="card-body">
                            <h5 class="card-title">Product1</h5>
                            <h6>
                               <i class="fas fa-star"></i>
                               <i class="fas fa-star"></i>
                               <i class="fas fa-star"></i>
                               <i class="fas fa-star"></i>
                               <i class="far fa-star-half"></i>
                            </h6>

                            <p class="card-text">
                              some quick example text to build on the card
                            </p>
                            <h5>
                              <span class="price">1000BDT</span>
                            </h5>
                            <button type="submit" class="btn btn-warning my-3" name="add">Add to Cart <i class="fas fa-shopping-cart"></i></button>
                          </div>
                     </div>
                </form>     
            </div> 
            <div class="col-md-3 col-sm-6 my-3 my-md-0">
                     
            </div> 
            <div class="col-md-3 col-sm-6 my-3 my-md-0">
                     
            </div> 
            <div class="col-md-3 col-sm-6 my-3 my-md-0">
                     
            </div> 
         </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

还有我的 style.CSS 文件：

img{
      max-width: 100%;
      height: auto;
      background-color: lightblue;
      background-color: radial-gradient(white 30%, lightblue 70%) ;
  }

.fa-star,
.fa-star-half{
      color: yellow;
  }

标签： htmlcssbootstrap-4

解决方案

background-color除非img图像是.pngor .svg(etc) 但不是.jpg.

我不确定card您要添加哪种颜色，但我认为它应该在card-body. 所以在你的css中做：

.card-body {
      max-width: 100%;
      height: auto;
      background-color: lightblue;
      background-color: radial-gradient(white 30%, lightblue 70%) ;
  }

推荐阅读