标签: twitter-bootstrap

Bootstrap模态出现在背景下

我直接从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)

任何想法为什么这是或我可以做些什么来解决这个问题?

javascript css modal-dialog twitter-bootstrap

554
推荐指数
24
解决办法
36万
查看次数

禁止Twitter Bootstrap模式窗口关闭

我正在使用Twitter Bootstrap创建一个模态窗口.默认行为是,如果单击模态区域外,模态将自动关闭.我想禁用它 - 即在模态外部单击时不关闭模态窗口.

有人可以共享jQuery代码来做到这一点吗?

jquery modal-dialog mouseclick-event twitter-bootstrap

537
推荐指数
11
解决办法
33万
查看次数

519
推荐指数
8
解决办法
30万
查看次数

将功能绑定到Twitter Bootstrap Modal Close

我正在一个新项目上使用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");在我点击时添加到上面的函数也没有任何反应.

jquery modal-dialog twitter-bootstrap

509
推荐指数
9
解决办法
53万
查看次数

什么是Bootstrap?

这里有很多与Bootstrap有关的问题.我看到很多人都在使用它.所以我试着研究它,然后我找到了官方的Bootstrap网站,但之后只有一个下载部分和几个字.没有什么可以解释它是什么......我只是明白它是一个前端的帮手.我试图通过谷歌搜索找到一些东西,但没有找到具体的东西.我发现的一切都与计算机科学的定义有关.

所以,我的问题是:

  • 什么是Bootstrap?
  • 它用于什么,它如何帮助前端开发?
  • 我还想了解更多细节.

html css frontend twitter-bootstrap

502
推荐指数
6
解决办法
47万
查看次数

容器流体与容器

刚下载3.1并在文档中找到...

通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container.container-fluid.

bootstrap.css,它似乎.container-fluid是相同的.container.两者都具有相同的CSS,并且每个实例.container-fluid都与之配对.container,并且所有列类都以百分比指定.

当看到示例时,我看不出任何差异,因为一切看起来都很流畅.

由于我是Bootstrap的新手,我认为我错过了一些东西.有人可以花点时间开导我吗?

twitter-bootstrap twitter-bootstrap-3

491
推荐指数
7
解决办法
43万
查看次数

将数据传递给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()函数

(我也试过这个:如何在模态对话框中设置输入值?)

javascript asp.net-mvc jquery twitter-bootstrap

484
推荐指数
9
解决办法
71万
查看次数

如何设置<td>的固定宽度?

简单方案:

  <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>仍然相同.

css html-table width twitter-bootstrap

472
推荐指数
11
解决办法
81万
查看次数

Twitter Bootstrap - 在行之间添加顶部空间

如何class="row"使用twitter bootstrap框架为元素添加边距?

css twitter-bootstrap

462
推荐指数
9
解决办法
67万
查看次数

如何让我的Twitter Bootstrap按钮右对齐?

我在这里有一个简单的演示:

http://jsfiddle.net/HdeZ3/1/

<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

435
推荐指数
10
解决办法
98万
查看次数