Bootstrap模态加载但无响应

时间:2015-03-07 02:25:53

标签: javascript jquery html css twitter-bootstrap

我已经阅读了关于这个主题的许多主题,但没有人回答我遇到的问题。我正在尝试创建一个跨越页面宽度的模态视图叠加层。但是,模态渲染但它没有响应。它变黑了,按钮不起作用。这就是我加载资产的方式:

<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>

这就是我在modal上运行的代码:

</head>
  <body>
    <!--  Modal    -->
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <%= yield %>
    </div>    
  </body>
</html>

这就是我想从中调用的地方。我认为因为我有一个动画效果,它可能会搞砸事件。请注意,这是收益率中的第一件事:

<div class="container-fluid">
    <div class="row"><div class="col-md-12"><h1>Title</h1></div>
          <div class="row">     
            <div class="col-md-3">
              <div class="menu-item-1 card effect_hover">  
                <a class="modal-link" data-toggle="modal" data-target="#basicModal">
                  <div class="card_front">
                    <span class="icon-home3 card_text"></span><br>ABOUT
                  </div>
                <div class="card_back">
                  <span class="card_text">Learn all about our community!</span> 
                </div>
               </a>
              </div>
             ...

所以,就是这样。我已经阅读了Bootstrap的文档,并将代码复制到页面中,但仍然存在同样的问题。我也尝试使用本地版本的bootstrap资产。思考?

1 个答案:

答案 0 :(得分:0)

  

我正在尝试创建一个跨越页面宽度的模态视图叠加层。

那么在这种情况下,你必须在bootstrap.css(不推荐)或你的自定义css文件中编辑下面的CSS行。

这是一行:

@media (min-width: 768px) {
  .modal-dialog {
    width: 100%;    // by default its 600px.
    margin: 30px auto;
  }

Bootstrap轮播是为响应而设计的,请参见屏幕截图:

在大屏幕上:

On bigger screen

在较小的屏幕上:

On smaller screens

你必须在模态中有一些内容,这些内容没有响应,或者说具有固定的宽度。

如果你看一下模态的样式,在bootstrap.css中,你会看到:

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

宽度设置为自动,除非屏幕宽度为768或更大,此时宽度设置为。

width:600px;