Question

我正在学习前端开发。我想告诉我为什么img-responsive不起作用。这是我的代码。是的如果我正在做其他一些不良做法，请告诉我。

HTML：

<div class="container-fluid">
  <div class="background">
 <div class="row">
  <div class="col-xs-12 col-md-12">
    <h1 class="text-center heading">H.G Wells</h1>
  <hr>  
     </div> 
        </div>
  <div class="row">
   <div class="col-xs-12 col-md-6 col-lg-6"> 
     <div id="word1">
       <h2 class="text-center">Father of Science friction books</h2>
       <div class="img-responsive img-rounded">
       <img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" >
     </div>
     </div>
    </div>  
</div>
</div>
</div>

CSS

body{
  top-margin:60px;
}
.heading{
  font-size:400%;
}
.background{
  background-color:lightgrey;
  margin-top:5rem;
}
#word1{
  margin-top:1rem;
  margin-bottom:1rem;
  color:black;
}

Answer 1

班级img-responsive img-rounded会转到img元素，而不是div

前：

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells"  lass="img-responsive img-rounded">`

Answer 2

您使用的是哪个版本的Bootstrap？如果您使用的是版本4，则会将其更改为img-fluid：

<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Grateful_Dead_-_Jerry_Garcia.jpg" alt="HGWells" class="img-fluid img-rounded">

Bootstrap img-responsive不工作？

2 个答案: