Question

我正在尝试使用模态弹出窗口更改它的宽度，以便它匹配col-lg-8，col-xs-10

但我发现模态是固定宽度。

所以，然后我找到了一个可以改变宽度的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;
}

Bootstrap模态宽度

1 个答案: