我正在使用Bootstrap 3.0。我想用“img-circle”类显示三个图像。如何摆脱这些图像周围的子弹点和框?
由于
<div class="row">
<ul class="thumbnails">
<li class="col-md-4">
<article class="thumbnail">
<img src="img/content writing.jpg" alt="pencil" class="img-circle">
<h3>Content Writing</h3>
<p>lore ipsum</p>
</article>
</li>
<li class="col-md-4">
<article class="thumbnail">
<img src="img/design.jpg" alt="folder" class="img-circle">
<h3>Design</h3>
<p>lore ipsum</p>
</article>
</li>
<li class="col-md-4">
<article class="thumbnail">
<img src="img/social media.jpg" alt="person" class="img-circle">
<h3>Social Media</h3>
<p>lore ipsum</p>
</article>
</li>
</ul>
</div>
答案 0 :(得分:1)
在Bootstrap 3中,缩略图不再需要包含在ul.thumbnails中。将example code in the Bootstrap 2.3 documentation与Bootstrap 3中的{{3}}进行比较(摘录如下):
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>
删除ul将消除要点。
答案 1 :(得分:1)
您还可以使用list-inline
摆脱子弹......
<div class="row">
<ul class="list-inline">
<li class="col-md-4">
<article class="thumbnail">
<img src="//placehold.it/100x100" alt="pencil" class="img-circle">
<h3>Content Writing</h3>
<p>lore ipsum</p>
</article>
</li>
...
答案 2 :(得分:0)
您还可以将css设置为从ul中删除项目符号:
ul {
list-style-type: none;
}