【问题标题】:Bootstrap 3 .img-responsive images are not responsive images inside linksBootstrap 3 .img 响应图像不是链接内的响应图像
【发布时间】:2018-04-05 08:21:30
【问题描述】:

我正在使用 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>

感谢大家的帮助!

【问题讨论】:

  • but images with links on insta and vk are not responsive 什么意思?
  • 他们没有改变他们的大小
  • 我不明白你的意思。您说话的方式几乎就像是在将 HMTL/图像 放入 Instagram/VK ?
  • 抱歉,img 这些在 <a></a> 元素内
  • 你检查过图片是否有 CSS 覆盖了图片的 CSS?

标签: html css twitter-bootstrap image


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-07-02
    • 2016-05-10
    • 1970-01-01
    • 2013-09-19
    • 2015-05-13
    • 2014-02-12
    • 2015-04-06
    • 2015-04-29
    相关资源
    最近更新 更多