twitter-bootstrap Bootstrap 3.0 中的 img-circle 圆形图像有问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19169127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:43:16  来源:igfitidea点击:

Having Trouble with img-circle Rounded Images in Bootstrap 3.0

twitter-bootstrap

提问by user37850

I am using Bootstrap 3.0. I want to display three images with the class "img-circle". How do I get rid of the bullet points and the box surrounding these images?

我正在使用 Bootstrap 3.0。我想用“img-circle”类显示三个图像。如何摆脱这些图像周围的项目符号和框?

Thanks

谢谢

<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>

采纳答案by Martey

In Bootstrap 3, thumbnails no longer need to be contained in a ul.thumbnails. Compare the example code in the Bootstrap 2.3 documentationto that in Bootstrap 3(excerpted below):

在 Bootstrap 3 中,缩略图不再需要包含在 ul.thumbnails 中。比较自举2.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>

Removing the ul will get rid of the bullet points.

删除 ul 将摆脱项目符号点。

回答by Zim

You can also use list-inlineto get rid of the bullets...

你也可以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>
              ...

Demo http://bootply.com/86476

演示 http://bootply.com/86476

回答by JCC

You can also set your css to remove bullets from your ul like this:

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

ul {
 list-style-type: none;
}