个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已阅读有关此主题的许多主题，但没有一个能回答我遇到的问题。我正在尝试创建一个跨越页面宽度的模态视图覆盖。但是，模态呈现但没有响应。它变暗了，按钮不起作用。这是我加载 Assets 的方式:
<!-- 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">×</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>
这就是我希望从中调用它的地方。而且我认为因为我有一个动画效果，所以它可能会破坏事件。请注意，这是 yield 中的第一件事:
<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 Assets 。想法？
最佳答案
I am trying to create a modal view overlay that spans the page width.
在这种情况下，您必须在 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;
关于javascript - Bootstrap 模态加载但无响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28910709/
25
4
0
我来自 Asp.Net 世界，试图理解 Angular State 的含义。 什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？ 我听到很多人
我一直在寻找 3 态拨动开关，但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀！