我已经阅读了关于这个主题的许多主题,但没有人回答我遇到的问题。我正在尝试创建一个跨越页面宽度的模态视图叠加层。但是,模态渲染但它没有响应。它变黑了,按钮不起作用。这就是我加载资产的方式:
<!-- 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">×</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资产。思考?
答案 0 :(得分:0)
我正在尝试创建一个跨越页面宽度的模态视图叠加层。
那么在这种情况下,你必须在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;
}
宽度设置为自动,除非屏幕宽度为768或更大,此时宽度设置为。
width:600px;