滚动间谍在引导程序 4 中没有响应答案

【问题标题】：Scroll spy not responding in bootstrap 4滚动间谍在引导程序 4 中没有响应
【发布时间】：2019-09-15 18:30:12
【问题描述】：

下面是我应用了滚动间谍引导组件的模板中的代码 sn-p。

以下代码 sn-p 确实会在单击带有 href 的 <a> 标记时获取内容，但其容器不具有粘性，如文档中所示。

根据引导文档，有 2 个使用方法数据属性和通过 javascript。

我尝试了这两种方法，但容器在向下滚动时没有粘在顶部。

如何让它变得粘稠？

body {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<body data-spy="scroll" data-target="#navbar-example">
  <ul class="nav nav-pills nav-fill" id="navbar-example2" class="navbar navbar-light bg-light">
    <li class="nav-item">
      <a class="nav-link active" href="#fat">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">Longer nav link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#one">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#two">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#three">Link</a>
    </li>
  </ul>
  <div>
    <h4 id="fat">@fat</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
      Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
      voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
      porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
      dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
      obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
      Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
    <h4 id="mdo">@mdo</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
      Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
      voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
      porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
      dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
      obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
      Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
    <h4 id="one">one</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
      Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
      voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
      porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
      dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
      obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
      Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
    <h4 id="two">two</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
      Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
      voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
      porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
      dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
      obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
      Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
    <h4 id="three">three</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
      Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
      voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
      porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
      dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
      obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
      Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
  </div>
</body>

引导文档指出：

所有 Bootstrap 的 JavaScript 文件都依赖于 util.js，它必须与其他 JavaScript 文件一起包含。如果您使用的是已编译（或缩小）的 bootstrap.js，则无需包含它——它已经存在了。

但我得到的答案是我应该从 utils 添加 scrollspy。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

你需要添加 scrollspy.js 在这里你可以找到所有 Bootstrap 的 JavaScript 文件： https://cdnjs.com/libraries/twitter-bootstrap/4.0.0-alpha

要让导航保持在顶部，请添加此 css

 .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-fixed-bottom, .navbar-fixed-top {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }

<html>
    <head>
      
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-fixed-bottom, .navbar-fixed-top {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    
    </style>
    
    </head>
      <body data-spy="scroll">
      
    <div class="bd-example">
      <nav id="navbar-example2" class="navbar navbar-fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link" href="#fat">@fat</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#mdo">@mdo</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#one">one</a>
              <a class="dropdown-item active" href="#two">two</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#three">three</a>
            </div>
          </li>
        </ul>
      </nav>
      <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
        <h4 id="fat">@fat</h4>
        <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
        <h4 id="mdo">@mdo</h4>
        <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
        <h4 id="one">one</h4>
        <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
        <h4 id="two">two</h4>
        <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
        <h4 id="three">three</h4>
        <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
        <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
        </p>
      </div>
    </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/scrollspy.js" ></script>
        
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    </body>
    </html>   You nead to add  scrollspy.js

<html>
    <head>
      
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-fixed-bottom, .navbar-fixed-top {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    
    </style>
    
    </head>
      <body data-spy="scroll">
      
    <div class="bd-example">
      <nav id="navbar-example2" class="navbar navbar-fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link" href="#fat">@fat</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#mdo">@mdo</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#one">one</a>
              <a class="dropdown-item active" href="#two">two</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#three">three</a>
            </div>
          </li>
        </ul>
      </nav>
      <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
        <h4 id="fat">@fat</h4>
        <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
        <h4 id="mdo">@mdo</h4>
        <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
        <h4 id="one">one</h4>
        <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
        <h4 id="two">two</h4>
        <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
        <h4 id="three">three</h4>
        <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
        <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
        </p>
      </div>
    </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/scrollspy.js" ></script>
        
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    </body>
    </html>

【讨论】：

为了让组件保持在顶部，我为您提供了 css .navbar-fixed-top { top: 0;边框宽度：0 0 1px； } .navbar-fixed-bottom, .navbar-fixed-top { 位置：固定；右：0；左：0； z 指数：1030； } 请看我的例子