Question

我使用Bootstrap 3并遇到问题。行中的一些图像响应正常，但是在insta和vk上具有链接的图像没有响应。图像大小为40x40

以下代码

.navbar-default-footer {
  background-color: white;
  text-align: center;
  margin-bottom: 0;
}

div.col-lg-4.col-md-4.col-xs-4 img {
  margin-left: auto;
  margin-right: auto;
  display: inline;
}

.footer_text {
  font-size: 5px;
  color: #708090;
  margin-bottom: 0px;
}

<nav class="navbar navbar-default-footer" role="navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-xs-4">
        <img src="images/Originals/example2.jpg" class="img-responsive">
      </div>
      <div class="col-lg-4 col-md-4 col-xs-4">
        <a href="#" data-toggle="tooltip" data-placement="left" title="Ищи меня в Instagram"><img src="images/insta_40x40.jpg" class="img-responsive"></a>
        <a href="#" data-toggle="tooltip" data-placement="right" title="Ищи меня VK"><img src="images/vk_40x40.jpg" class="img-responsive"></a>
      </div>
      <div class="col-lg-4 col-md-4 col-xs-4">
        <img src="images/Originals/example2.jpg" class="img-responsive">
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
          <p class="footer_text">
            Свадебные прически в Виннице. Людмила Кулик. Все права защищены, любое копирование и использование материала запрещено без согласия автора.</p>
        </div>
      </div>
    </div>
  </div>
</nav>

谢谢大家的帮助！

Answer 1

这是因为a元素默认为display: inline;。将a元素设置为display: inline-block;或display: block;。

Bootstrap 3 .img响应图像不是链接内的响应图像

1 个答案: