Question

我正在写一本关于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 &raquo;</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>&copy; 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>

这是我得到的，根据书中的文字，子弹不应该在那里：

enter image description here

Answer 1

当您查看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 -->
    ...

JSFiddle 和Full screen

Answer 2

感谢Nizam的代码，问题解决了。我仍然不明白为什么它不能开箱即用，但我现在有一个解决方案，所以我不会担心它。答案是：

添加

.thumbnails li{list-style:none !important;}

到自定义css文件。这对我有用。

学习Bootstrap缩略图......为什么要显示子弹？

2 个答案: