twitter-bootstrap - 在Bootstrap 3.0中遇到img-circle圆形图像问题

twitter-bootstrap - 在Bootstrap 3.0中遇到img-circle圆形图像问题,第1张

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

最佳答案:

3 个答案:

答案 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>
              ...

演示 http://bootply.com/86476

答案 2 :(得分:0)

您还可以将css设置为从ul中删除项目符号:

ul {
 list-style-type: none;
}
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复