Question

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

我已使用我找到的here代码向页面添加了一个弹出窗体。这一切似乎到目前为止 - 但是，我觉得显示的弹出框太高了。我想降低一点，这样我（至少）可以看到显示形式的顶部。

我用firebug检查了css。我注意到样式来自bootstrap，来自这些行（按给定顺序）：

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），我认为最好在这里问一下，以防我最后打破我到目前为止的布局。

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

Answer 1

不要害怕修改代码。只需遵守自己的规则并在底部展示它们。你以后可以随时删除它。不要编辑bootstrap css代码本身。最低的代码会覆盖之前的代码。

使用萤火虫＆amp;它的风格＆amp;计算样式面板进行测试。

Twitter bootstrap模式弹出窗体 - 如何降低显示的窗体

1 个答案: