Question

如何更改＆lt; a＆gt;的宽度？下面的标签与test_small.jpg图像宽度完全相同？

<div class="row">
   <div class="col-md-5">
   <a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
        <img class="img-responsive" src="test_small.jpg">
   </a>
   </div>
   <div class="col-md-7">
   ...
   </div>
</div>

我尝试使用：

<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">

没有成功。

感谢。

编辑： http://www.bootply.com/PGsq7xJeOt

Answer 1

您可以添加自动宽度。您需要指定display: block才能生效。

.fancybox.thumbnail {
    display: block;
    width: auto;
}

Answer 2

我将类添加到...例如：.customThumbnail

HTML：

<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
        <img class="img-responsive" src="test_small.jpg">
</a>

CSS：

a.customThumbnail {display: block; width: 200px;}

你可以在这里使用任何宽度（在col-md-5中），因为你的图像是响应的 - 它会调整。另外，尝试重置填充（因为“a”可能在它周围有一些填充）。

a.customThumbnail {display: block; width: 200px; padding: 0}

虽然，JSFiddle是最好的：）

Answer 3

我在ToWho上有一个活跃的例子。

<div class="row">
<div class="col-md-5">
    <a href="/assets/images/gallery/test.jpg">
    <div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
    <img class="img-responsive" src="test_small.jpg" alt="Small Images">
    </div>
    </a>
    </div>
<div class="col-md-7"></div>
</div>

为什么它不起作用很难在没有小提琴的情况下解决。锚点不需要任何特殊的东西来占用div的空间，特别是因为它位于Bootstrap网格元素中。

Answer 4

尝试创建一个新类，使其宽度为100％或使其成为内联样式。

<div class="row">
    <div class="col-md-5">
      <a href="/assets/images/gallery/test.jpg"> <img class="image-responsive" style="width:100%;"   src="test_small.jpg"/></a>   </div>
    <div class="col-md-7">
    ...
    </div>
</div>

Bootstrap 3：如何更改'a'标签的宽度，就像它包含的图像宽度一样？

4 个答案: