我直接从Bootstrap示例中使用了代码用于我的模态,并且只包含了bootstrap.js(而不是bootstrap-modal.js).但是,我的模态出现在灰色淡入淡出(背景)下方,并且不可编辑.
这是它的样子:

看到这个小提琴是一种重现这个问题的方法.该代码的基本结构如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Run Code Online (Sandbox Code Playgroud)
任何想法为什么这是或我可以做些什么来解决这个问题?
我正在使用Twitter Bootstrap创建一个模态窗口.默认行为是,如果单击模态区域外,模态将自动关闭.我想禁用它 - 即在模态外部单击时不关闭模态窗口.
有人可以共享jQuery代码来做到这一点吗?
是什么之间的差异col-lg-*,col-md-*并col-sm-*在Twitter的引导?
css responsive-design twitter-bootstrap twitter-bootstrap-3 bootstrap-4
我正在一个新项目上使用Twitter Bootstrap lib,我想要部分页面刷新并检索模态关闭时的最新json数据.我在文档中的任何地方都没有看到这个,有人可以指出它或建议解决方案.
使用记录的方法有两个问题
$('#my-modal').bind('hide', function () {
// do something ...
});
Run Code Online (Sandbox Code Playgroud)
我已经将"隐藏"类附加到模态,因此它不会在页面加载时显示,因此会加载两次
即使我删除了hide类并将元素id设置为display:none并且console.log("THE MODAL CLOSED");在我点击时添加到上面的函数也没有任何反应.
这里有很多与Bootstrap有关的问题.我看到很多人都在使用它.所以我试着研究它,然后我找到了官方的Bootstrap网站,但之后只有一个下载部分和几个字.没有什么可以解释它是什么......我只是明白它是一个前端的帮手.我试图通过谷歌搜索找到一些东西,但没有找到具体的东西.我发现的一切都与计算机科学的定义有关.
所以,我的问题是:
刚下载3.1并在文档中找到...
通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局
.container来.container-fluid.
看bootstrap.css,它似乎.container-fluid是相同的.container.两者都具有相同的CSS,并且每个实例.container-fluid都与之配对.container,并且所有列类都以百分比指定.
当看到示例时,我看不出任何差异,因为一切看起来都很流畅.
由于我是Bootstrap的新手,我认为我错过了一些东西.有人可以花点时间开导我吗?
我有几个超链接,每个超链接都附有一个ID.当我点击此链接时,我想打开一个模态(http://twitter.github.com/bootstrap/javascript.html#modals),并将此ID传递给模态.我搜索谷歌,但我找不到任何可以帮助我的东西.
这是代码:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
Run Code Online (Sandbox Code Playgroud)
哪个应该打开:
<div class="modal hide" id="addBookDialog">
<div class="modal-body">
<input type="hidden" name="bookId" id="bookId" value=""/>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
有了这段代码:
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});
Run Code Online (Sandbox Code Playgroud)
但是,当我单击超链接时,没有任何反应.当我给超链接一个href ="#addBookDialog"时,模态打开就好了,但它不包含任何数据.
我按照这个例子:如何将值参数传递给Bootstrap中的modal.show()函数
(我也试过这个:如何在模态对话框中设置输入值?)
简单方案:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
Run Code Online (Sandbox Code Playgroud)
我需要设置一个固定的宽度<td>.我试过了:
tr.something {
td {
width: 90px;
}
}
Run Code Online (Sandbox Code Playgroud)
也
td.something {
width: 90px;
}
Run Code Online (Sandbox Code Playgroud)
对于
<td class="something">B</td>
Run Code Online (Sandbox Code Playgroud)
乃至
<td style="width: 90px;">B</td>
Run Code Online (Sandbox Code Playgroud)
但宽度<td>仍然相同.
如何class="row"使用twitter bootstrap框架为元素添加边距?
我在这里有一个简单的演示:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我有一个无序列表,对于每个列表项,我希望左边有文本,然后是右对齐按钮.我试图使用右拉,但这完全弄乱了对齐.我究竟做错了什么?
twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-2 bootstrap-4
css ×5
jquery ×3
modal-dialog ×3
bootstrap-4 ×2
javascript ×2
asp.net-mvc ×1
frontend ×1
html ×1
html-table ×1
width ×1