Bootstrap模態加載但無響應

Question

我已經閱讀了關於這個主題的許多主題，但沒有人回答我遇到的問題。 我正在嘗試創建一個跨越頁面寬度的模態視圖疊加層。 但是，模態渲染但它沒有響應。 它變黑了，按鈕不起作用。 這是我加載資產的方式：

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

這是我在模態上運行的代碼：

</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資產。 思考？

Answer 1

我正在嘗試創建一個跨越頁面寬度的模態視圖疊加層。

那么在這種情況下，你將不得不在bootstrap.css（不推薦）或自定義css文件中編輯下面的CSS行。

這是行：

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

Bootstrap輪播是為了響應而構建的，請參見屏幕截圖：

在大屏幕上：

在更大的屏幕上。

在較小的屏幕上：

在較小的屏幕上

你必須在模態中有一些內容，這些內容沒有響應，或者說具有固定的寬度。

如果你看一下模態的樣式，在bootstrap.css中，你會看到：

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

寬度設置為auto，除非屏幕寬度為768或更大，此時寬度設置為。

width:600px;

Bootstrap模態加載但無響應

問題描述

1 個解決方案

解決方案1
0 2015-03-07 03:05:50

Bootstrap模態加載但無響應

問題描述

1 個解決方案

解決方案1 0 2015-03-07 03:05:50

解決方案1
0 2015-03-07 03:05:50