个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 NodeJS 和 MongoDB 开发仪表板网站。在其中一个页面中，我必须在模态窗口中打开一个图像。以下是该页面的代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tor Modal Check</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="css/responsive-tables.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="js/responsive-tables.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style type="text/css">
body .modal {
width: 650px;
margin-left: -325px;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="rightpanel">
<ul class="commentlist">
<% tor.forEach(function(t){ %>
<li>
<img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" />
<div class="comment-info">
<h4><a href="<%= t.url %>"><%= t.url %></a></h4>
<p><strong>Comments: </strong><%= t.comments %></p>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button>
<!-- Modal -->
<div class="modal fade" id="<%= t.modalid %>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><%= t.url %></h4>
</div>
<div class="modal-body">
<img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<% }) %>
</ul>
</div>
</div>
</body>
我面临的问题是并非所有“查看屏幕截图”都是可点击的。深入挖掘后，我认为这是因为“rightpanel”div 类。
/*** MAIN PANEL ***/
.rightpanel { margin-left: 260px; background: #f7f7f7; }
.rightpanel:after { clear: both; content: ''; display: block; }
如果我删除 margin-left: 260px; 一切都按预期工作。知道为什么会发生这种情况以及如何克服它吗？
附言。这不是完整的代码。只有对这个问题有意义的代码。
编辑 1:当我将 margin-left: 260px 更改为 margin-left: 150px 时，它工作得很好。
最佳答案
Bootstrap modals已经居中并具有三种尺寸(.modal-sm 为 300px，.modal-lg 为 600px(默认)和 900px)。但是，如果您需要宽度恰好为 650px，则应设置 .modal-dialog 的宽度，而不是 .modal。例如:
@media (min-width: 768px)
.modal-dialog {
width: 650px;
}
关于node.js - NodeJS 中的 Bootstrap 模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41584019/
26
4
0
我来自 Asp.Net 世界，试图理解 Angular State 的含义。 什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？ 我听到很多人
我一直在寻找 3 态拨动开关，但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀！