2

我有一个使用 twitter bootstrap 设计的网页以及它的响应式 css 包含，以使所有内容都响应不同的窗口大小。但是当浏览器调整大小时，以下代码中的图像不会自行调整大小，因此没有显示响应性

<div class="container-fluid">
    <div class="row-fluid">
    <div class="span"> <div class="media">
    <a href="http://facebook.com" target="_blank" class="media-link"><img class="mod-picture" src="images/picture.jpg" alt="post picture" /></a> <div class="media-container"><a class="link-name" href="#" target="_blank">media name</a></div>
    </div></div></div></div>

    In css file styles are - 
    .media-link
    {
            float:left;
        border:1px solid #ccc;
        display:inline-block;
        color:#3B5998;
        cursor:pointer; 
        margin-right:5px;
    }
    .mod-picture{
        margin-right:10px;
        border:0;
        display:block;
        margin:3px;
    }

但是如果我删除 float:left; 和显示：内联块；来自媒体链接类的样式然后图像在浏览器窗口大小更改时调整大小。但我无法删除这两个属性，因为下一个具有“媒体容器”类的内容需要出现在右侧。我尝试了多种方式，例如添加浮动：留在链接之前的div中但失败了。请建议我。

4

3 回答 3

2

如果您使用的是 bootstrap 3，那么您可能需要将类“img-responsive”添加到您的“img”标签中。

于 2013-12-12T23:01:50.400 回答
1

如果您使用的是引导程序 3，您应该这样做。然后只需将类 img-responsive 添加到 img 标签。这就是让它响应的全部内容。

这是 bootstrap3 css 的 CDN 链接。你甚至不需要添加引导响应的 css。

//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"

如果 bootstrap 2.3 存在问题，请使用此-

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span-12">
   <div class="media">
     <a href="http://facebook.com" target="_blank" class="media-link">
      <img class="mod-picture" src="images/picture.jpg" alt="post picture" />
     </a>
     <div class="media-container">
      <a class="link-name" href="#" target="_blank">media name</a>
     </div>
    </div>
    <div style="clear:both"></div>
   </div>
  </div>
</div>


.mod-picture{
  width:40%;
  padding:5%;
  max-width: 200px;
  height:auto;
  float:left;
}
 .media-container{
   display:inline-block;
 }
于 2013-12-13T01:29:15.053 回答
1

您可以从 Bootstrap 3 中获取样式并申请您的代码：

<a href="http://facebook.com" target="_blank" class="media-link">
   <img class="mod-picture" src="images/picture.jpg" alt="post picture" />
</a>

.media-link{
  //nothing styles
}

.mod-picture{
  // max width of image
  max-width: 50%;
  float: left;
  display: block;
  border:1px solid #ccc;
}
于 2013-12-13T00:10:42.533 回答