模态框的引导权：0不工作

Question

我有一个模态盒的引导程序;我希望它被卡在屏幕的右侧;我尝试了以下但是当我重新调整窗口大小时它不起作用:(请你在这方面帮助我！

<div id='test'>
    <div id="add_pixel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div>
</div>

#add_pixel{
    position: absolute;
    right: 0;
}

但它不会出现在屏幕的右侧！值得一提的是我的css文件在bootstrap css文件后被调用了！

但是下面的代码工作正常：

<div id="id1">
    <div id='id2'>

    </div>
</div>

#id1{
    background-color: yellow;
    height: 400px;
}

#id2{
    background-color: red;
    height: 200px;
    width: 200px;
    position: absolute;
    right: 0px;        
}

我无法弄清楚为什么它不能使用模态盒的引导程序，而它与常规DIV一起工作正常！

感谢您的帮助！

Answer 1

我发现如何做到的唯一方法就是直接修改bootstrap.css。

找到.modal的规则并删除left：0

以下是来自bootstrap3 livedemo左侧的示例：在Firefox中禁用了0。

据我所知，不可能将css规则覆盖为空。

Answer 2

我也遇到了很多这方面的问题，但是这种以下的风格适合整个模态面板的边缘。

#clams-modal{
    position:fixed;
    margin:0px auto;
    width:auto;
    z-index:100001;
    left:22px;
    right:22px;
    top:22px;
    bottom:22px ;
}

也许在你的情况下尝试类似

的东西

#add_pixel{
    position:fixed;
    margin:0px auto;
    width:auto;
    z-index:100001;
    left:20%;
    right:0px;
    top:22px;
    bottom:22px ;
}

设置为auto的宽度似乎是正确修复工作的关键因素。