1

我最近下载了 TB 2，并开始熟悉它。我正在根据英雄示例创建一个页面。

我使用在这里找到的代码向页面添加了一个弹出表单。到目前为止，这一切似乎都有效 - 但是，我觉得显示的弹出框太高了。我想把它降低一点，这样我就可以（至少）看到显示表格的顶部。

我用萤火虫检查了CSS。我注意到样式来自引导程序，来自这些行（按给定顺序）：

element.style {
    display: block;
}
.modal.fade.in {
    top: 50%;
}
.modal.fade {
    top: -25%;
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
}
.fade.in {
    opacity: 1;
}
.hide {
    display: none;
}
.modal {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: 50%;
    margin: -250px 0 0 -280px;
    outline: 0 none;
    position: fixed;
    top: 50%;
    width: 560px;
    z-index: 1050;
}
.fade {
    opacity: 0;
    transition: opacity 0.15s linear 0s;
}

要做的“显而易见”的事情是向显示表单的元素添加一个选择器，并向我的外部样式表添加一个新的 CSS 规则，或者可能覆盖/自定义 TB 提供的样式。

但是，由于我真的不知道自己在做什么（我还在学习 TB），所以我认为最好在这里问一下，以防我最终破坏了到目前为止的布局。

降低弹出表单的推荐方法是什么，以便我可以看到表单的顶部，也许还有它后面的一点导航栏（不过，理想情况下，我希望弹出表单显示在导航栏下方菜单 - 但这可能太复杂了）。

4

1 回答 1

3

不要害怕修改代码。只需采用您自己的规则并将其显示在底部即可。你以后可以随时将其删除。不要编辑引导 css 代码本身。最低的代码覆盖前面的代码。

并使用萤火虫及其样式和计算样式面板进行测试。

于 2012-11-13T17:50:52.453 回答