Jquery 学习引导缩略图…为什么子弹会出现？_Jquery_Html_Css_Twitter Bootstrap

Jquery 学习引导缩略图…为什么子弹会出现？

jquery html css twitter-bootstrap

Jquery 学习引导缩略图…为什么子弹会出现？,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在阅读一本关于Bootstrap的书，到目前为止我印象深刻。按照给出的示例，我应该看到2行4个缩略图，下面有一个标题。无论我做什么，我都会在标题的左边找到一颗子弹。有人能指导我如何使用bootstapcss摆脱这种情况吗代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib

我正在阅读一本关于Bootstrap的书，到目前为止我印象深刻。按照给出的示例，我应该看到2行4个缩略图，下面有一个标题。无论我做什么，我都会在标题的左边找到一颗子弹。有人能指导我如何使用bootstapcss摆脱这种情况吗

代码如下：

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


公文包|我的引导网站
切换导航
登录
文件夹
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui



项目标签




项目标签




项目标签




项目标签




项目标签




项目标签




项目标签




项目标签



&抄袭；公司2013

这就是我得到的，根据这本书的内容，子弹不应该在那里：

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

加

到自定义css文件。这对我来说是个好办法。

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

加

到自定义css文件。这对我来说就是一个窍门。

当您查看时，您将看到，它面向

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


项目标签
...

当您查看时，您将看到它面向

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


项目标签
...

并且

尝试将

缩略图li{list style:none！important；}

添加到css文件中，这样做可以正常工作，但我认为使用Bootstrap我不需要添加这种类型的东西？你知道为什么没有在开箱即用的情况下正确处理它吗？对不起，我不理解你的最后一点，请详细说明。尝试将

。缩略图li{list style:none！important；}

添加到你的css文件中，这样做很有效，但我认为使用引导我不需要添加那种类型的东西？你知道为什么没有在开箱即用的情况下正确处理吗？对不起，我不理解你的最后一点，请详细说明。我很高兴这对你有用，甚至我想知道为什么没有通过引导处理。总之，这只是一个改进建议。

。thubmnails li a{text align:center；}

它会将li的内容带到中心，这样看起来会更好。我很高兴这对你有用，甚至我想知道为什么它不是由BootStrap处理的。总之，这只是一个改进建议。

。thubmnails li a{text align:center；}

它会将li内容带到中心，这样看起来会更好。谢谢Olaf！我正在读的这本书使用的是Bootstrap 2.x.x，所以我必须转换这种方法。了解您提供的详细信息非常有用。使用

span*

而不是

col md-*

。谢谢Olaf！我正在读的这本书使用的是Bootstrap 2.x.x，所以我必须转换这种方法。了解您提供的此详细信息非常有帮助。对于，您可以使用

span*

而不是

col md-*

。