css - Bootstrap 模态宽度

Question

我正在尝试更改模态弹出窗口的宽度，使其与 col-lg-8、col-xs-10 匹配

但是我刚发现modal是固定宽度的。

所以，然后我找到了一个可以改变宽度的css样式:

<div class="modal fade" id="mdlBudgets" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content modal-graph col-lg-8 col-xs-10  well well-sm">

            <div class="row">
                <div class="col-xs-12">
                    <span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
                </div>
            </div>
            @if (Model.BarDescriptions.Length == 0)
            {
                <small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
            }
            else
            {
                <div id="budgets"></div>
            }

            <div class="row">
                <div class="col-xs-12 text-right"><a href="@Url.Action("Budgets", "Budget")" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-list"></span> View Budgets</a></div>
            </div>
        </div>
    </div>
</div>

CSS:

body .modal-graph {
    /* new custom width */
    width: 700px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: 350px;
}

但是，首先，它偏离了中心，但我最大的问题是 - 它是固定尺寸。有没有办法让我的模态图表现得像 col-lg-8、col-xs-10？

Answer 1

正如您所说，.modal-dialog 具有固定宽度，因此您必须覆盖它。然后要使用 col-xx-xx class，您必须将它们居中。像这样的东西:

<div class="modal fade" id="mdlBudgets" role="dialog">
    <div class="modal-dialog as-container">
        <div class="modal-content modal-graph col-lg-8 col-xs-10  well well-sm">

            <div class="row">
                <div class="col-xs-12">
                    <span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
                </div>
            </div>
            @if (Model.BarDescriptions.Length == 0)
            {
                <small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
            }
            else
            {
                <div id="budgets"></div>
            }

            <div class="row">
                <div class="col-xs-12 text-right"><a href="@Url.Action("Budgets", "Budget")" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-list"></span> View Budgets</a></div>
            </div>
        </div>
    </div>
</div>

和CSS:

@media (min-width: 768px) {
  .modal-dialog.as-container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-dialog.as-container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-dialog.as-container {
    width: 1170px;
  }
}

.modal-dialog.as-container .modal-content {
    float: none;
    margin: auto;
}