4

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

3 回答 3

1

在 Bootstrap 3 中,缩略图不再需要包含在 ul.thumbnails 中。将Bootstrap 2.3 文档中的示例代码与 Bootstrap 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 将摆脱项目符号。

于 2013-10-03T21:13:08.650 回答
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

于 2013-10-08T22:22:52.073 回答
0

您还可以设置您的 css 以从您的 ul 中删除项目符号,如下所示:

ul {
 list-style-type: none;
}
于 2014-01-13T22:02:53.713 回答