Question

我目前正在使用此主题http://www.bootply.com/render/85779#来创建移动网站。我试图实现一个模态，但似乎并没有使用这个主题。我在CSS和JS文件中实现了正确的代码，可能有什么问题？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Storystrap Template</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <div class="container">
          <div class="row">
            <div class="col-md-12"> 
              <div class="panel">
                <div class="panel-body">
                  <!--/stories-->
                  <div class="row">    
                    <br>
                    <div class="col-md-2 col-sm-3 text-center">
                      <a class="story-title" href="#"><img alt="" src="http://api.randomuser.me/portraits/thumb/men/58.jpg" style="width:100px;height:100px" class="img-circle"></a>
                    </div>
                    <div class="col-md-10 col-sm-9">
                      <h3>In n Out</h3>
                      <div class="row">
                        <div class="col-xs-9">
                          <h4><span class="label label-default">4 spots left</span></h4><h4>
                          <small style="font-family:courier,'new courier';" class="text-muted">Leaves at 1PM  • <a href="#" class="text-muted">Returns at 2PM</a></small>
                          </h4>
                        </div>
                        <div class="col-xs-3">
                          <button type ="button" class="btn btn-primary pull-right btnNext" data-toggle="modal" data-target="#moreModal">More <i class="glyphicon glyphicon-chevron-right"></i></button>
                          <!-- <ul>
                            <li></li>
                          </ul> -->
                        </div>
                      </div>
                      <br><br>
                    </div>
                  </div>
                  <hr>
                  <!--/stories-->   
                </div>
              </div>                                                
            </div><!--/col-12-->
          </div>
          <div class="modal" id="moreModal" tabindex="-1" role="dialog" aria-labelledby="moreModal" aria-hidden="true">
            <div class="modal-dialog">
             <div class="modal-header">
               <p>did it work</p>
              </div>
            </div>
          </div>
        </div>

Answer 1

你缺少jquery和modal.js。你不需要整个bootstrap.min.js库只需从官方网站下载所有文件并找到modal.js文件并在jquery之后将其添加到你的网站。

Bootstrap 3 Modal无法使用主题

1 个答案: