无法更改项目中的引导模式 css？答案

【问题标题】：Not able to change bootstrap modal css in project?无法更改项目中的引导模式 css？
【发布时间】：2017-05-24 08:14:12
【问题描述】：

因为，我在我的项目中使用了bootstrapmodal-dialog，我想更改modal-dialog 的css，但我无法更改它。我尝试了modal-dialog 的顶部，但看不到任何结果。以下是我的html 代码：

<div class="modal fade modal-container" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <small>Purpose</small>
                    <input type="text" name="NPurpose" id="IPurpose" class="form-control" placeholder="Purpose" tabindex="2">
                </div>
                <div class="form-group">
                    <small>DOP</small>
                    <input type="text" class="form-control" id="IDop" name="NDop" placeholder="MM/DD/YYYY"  tabindex="3">
                </div>
                <div class="form-group">
                    <small>Unit Price</small>
                    <input type="text" name="NUp" id="IUp" class="form-control" placeholder="Unit Price" data-bv-stringlength-max="1" tabindex="4">
                </div>
                <div class="form-group">
                    <small>Quantity</small>
                    <input type="text" name="NQty" id="IQty" class="form-control" placeholder="Quantity" tabindex="5">
                </div>  
                <div class="form-group">
                    <small>Description</small>
                    <textarea  name="NDescp" id="IDescp" class="form-control" maxlength="200" rows="4" placeholder="Description" tabindex="6"></textarea>
                    <span id="chars">200</span> characters remaining
                </div>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-danger btn-lg" style="width: 100%;">
                    <span class="glyphicon glyphicon-ok-sign"></span> Update</button>
            </div>
        </div>
                                                    <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
</div>

这是我的css 代码：

.modal-dialog{ 

    top:50% !important;
    position:fixed !important;
}

【问题讨论】：

您是否正确导入了 CSS？检查你的控制台..，你的代码绝对没问题jsfiddle.net/ZcLSE/1490
你能给我们看看你的项目的实时视图吗？
制作一个 fiddle/sn-p 以便每个人都可以查看它，在此之前您是否愿意先查看您的控制台？它会告诉你一些事情。
嗨，Yaar 我从 2008 年开始使用 PHP，并且开发了许多项目。但这是一件安静的奇怪事情，它现在无需修改任何代码即可工作。我认为数据可能已更新，并且 xamp 服务器未获取文件。

标签： jquery css twitter-bootstrap bootstrap-modal

【解决方案1】：

如果您想在屏幕的 center 和 middle 显示模式，请尝试此代码。希望对您有所帮助。

.modal-dialog {
 position: fixed;
 margin: 0 auto;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

【讨论】：

没有成功。它在同一个位置
我认为 bootstrap.min.css 文件是您的 custom style 文件的底部，所以请确保 bootstrap.min.css 文件应该位于您的 custome style 文件之上。之后，您的 css 属性将起作用。

【解决方案2】：

确保您将自定义 css 放在您的 head 标签中 Bootstrap css 之后，它看起来像下面的代码

<link rel="stylesheet" type="text/css" href="path-to-bootstrap-css.css">
<link rel="stylesheet" type="text/css" href="path-to-your-custom-css.css">

现在来解决你的问题

如果您想更改网站中的所有模式设计，请使用与您使用的相同的类，但在您的自定义 css 文件中写在 css 下方也不需要添加 !important

.modal-dialog{ 

    top:50%;
    position:fixed;
}

如果您想更改特定单个模态的设计，请使用 id 来设计您的模态

例如。您使用 id "edit" 那么您的 CSS 如下所示

#edit .modal-dialog{ 
    top:50%;
    position:fixed;
}

您无需添加 !important。

【讨论】：