我正在阅读一本关于 Bootstrap 的书，到目前为止给我留下了深刻的印象。按照给出的示例，我应该看到 2 行 4 个缩略图，下面有一个标题。无论我做什么，我都会在标题的左侧得到一颗子弹。有人可以指导我如何仅使用 bootstap CSS 摆脱它吗？
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Portfolio | My Bootstrap site</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Bootstrap Site</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="page-header">
<div class="container">
<h1>Portfolio</h1>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1200x40" />
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
<ul class="thumbnails">
<li class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</li><!-- col-md-3 -->
</ul>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src=".js/bootstrap.min.js"></script>
</body>
</html>
这是我得到的，根据书中的文字，子弹不应该在那里:
最佳答案
当您查看 Grid system ，您会看到，它适用于 div 元素。当您将 ul 替换为 div class="row" 并将 li 元素替换为 div 时，您将得到预期的结果
<div class="row thumbnails">
<div class="col-md-3">
<div class="img-thumbnail">
<a href="#" class="thumbnail"><img src="http://placehold.it/300x200" class="thumbnail" alt="" /></a><h4 class="thumbnail caption">Item Label</h4>
</div><!-- .thumbnail -->
</div><!-- col-md-3 -->
...
关于jquery - Learning Bootstrap Thumbnails...为什么会显示元素符号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20447887/