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

因为,我在我的项目中使用了bootstrapmodal-dialog,我想更改modal-dialogcss,但我无法更改它。我尝试了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】:

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

.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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-10
    • 1970-01-01
    • 2012-11-26
    • 1970-01-01
    • 2014-07-26
    • 2020-10-09
    • 1970-01-01
    • 2014-08-13
    相关资源
    最近更新 更多