如何更改 Twitter Bootstrap 模态框的默认宽度？

Question

我尝试了以下方法：

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

还有这段 JavaScript 代码：

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

结果不是我预期的。模态框在屏幕中央的左上角位置。

有谁能帮我吗？是否还有其他人尝试过这个问题？我想这不是一个不寻常的需求。

- user1321237

---

Bootstrap插件似乎没有那么多选项。尝试在Bootstrap CSS文件中找到该类，看看是否通过CSS设置，然后您应该能够覆盖它，或者至少会更清楚它是哪个元素。 - GillesC

看看Nick N的答案吧，他给出了一个非常好的响应式的答案！https://dev59.com/NGkw5IYBdhLWcg3wDWTL#16090509 - OnTheFly

Answer 1

更新：

在 bootstrap 3 中，您需要更改 modal-dialog。 因此，在这种情况下，您可以在 modal-dialog 所在的位置添加类 modal-admin。

原始答案（Bootstrap < 3）

您尝试使用 JS/jQuery 更改它的特定原因是什么？

您可以很容易地使用 CSS 完成它，这意味着您不必在文档中进行样式设置。 在您自己的自定义 CSS 文件中，您可以添加：

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

在您的情况下：

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

我将body放在选择器之前是为了使其优先级高于默认值。这样，您可以将它添加到自定义CSS文件中，并且不必担心更新Bootstrap。

- Marco Johannesen

---

请向下滚动以查看由@NickN提供的更好（响应式）答案！ - OnTheFly

@FloatingRock，你可以使其响应式，看看我的答案。 - Nick N.

@NickN. 太棒了！谢谢 Nick。 - FloatingRock

Bootstrap 3 使这变得更容易。.modal .modal-dialog { width: 800px; } 左侧位置会自动计算。 - Gavin

实际上，这对我不起作用。 @ZimSystem在评论中给出的解决方案解决了问题。 - tonjo

Answer 2

如果您希望只使用CSS使其具有响应性，请使用以下代码：

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

注意1：我使用了一个.large类，你也可以在普通的.modal上进行此操作

注意2：在Bootstrap 3中，可能不再需要负的margin-left（仅限个人未经证实） (个人未亲自确认)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

注意3：在Bootstrap 3和4中，有一个modal-lg类。因此这可能已经足够了，但如果您想使其响应式，仍然需要我为Bootstrap 3提供的修复方法。

在某些应用程序中，使用fixed模态框，在这种情况下，您可以尝试width:80%; left:10%;（公式：left = 100 - width / 2）。

- Nick N.

---

这似乎会导致在非常窄的屏幕上模态框只显示一半。 - cofiem

Cofiem，使用媒体查询来修复此问题。 - Nick N.

@NickN，我的媒体查询没有解决问题。你能给个例子吗？不用了，我搞定了。我写成了max-width而不是min-width。@media (min-width: 400px) { body .modal-lrg{ width: 80%; /* 响应式宽度 */ margin-left:-40%; /* 宽度的一半 */ } } - HPWD

我发现仅使用 % 无法提供足够的控制，而使用已经构建到 Bootstrap 中的列会更好。 - Alex

@mlunoe，确实有影响，请检查使用的Bootstrap版本和IE版本，也许我可以帮助你。 - Nick N.

Answer 3

如果您正在使用Bootstrap 3，则需要更改modal-dialog div而不是像接受的答案中所示的modal div。此外，为了保持Bootstrap 3的响应性，重要的是使用媒体查询编写覆盖CSS，以便在较小的设备上，模态框将占用全宽度。

请查看此JSFiddle以尝试不同的宽度。 HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

- arcdegree

---

适用于 Bootstrap 3 的正确版本。无需调整边距即可使用！谢谢。 - SQueek

我删除了答案中的id属性，因为它不是必需的。 - arcdegree

它可以工作，但不像mlunoe或Dave的答案那样响应迅速。 - ksiomelo

这对我来说是真正的答案，值得更多的赞同。 - Carlos Verdes

Answer 4

如果您想要一个不会破坏相对设计的东西，请尝试这个：

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

正如 @Marco Johannesen 所说，选择器前的 "body" 是为了使其比默认样式具有更高的优先级。

- mlunoe

---

建议只使用 margin-left:auto; margin-right:auto; 替代在四周使用 auto。 - cwd

在某些情况下，可能需要使用 top: 30%，百分比取决于内部内容。 - bool.dev

当我省略 .modal.fade.in 规则时，这对我很有效，该规则会在 Bootstrap V2.2.2 中将模态框移动到底部。 - ramiro

这个在ANGULAR-UI模态窗口示例中有效...只需将代码放入CSS文件中并加载到页面中即可... http://angular-ui.github.io/bootstrap/#/modal...运行示例请访问http://plnkr.co/edit/GYmc9s?p=preview - Marcello DeSales

这个解决方案在2.3.2引导程序和Internet Explorer 8、9、10的MAIN上运行良好！使用margin-left：-40％的解决方案在Internet Explorer上是不正确的！ - Cioxideru

Answer 5

在Bootstrap3+中，更改模态对话框的大小最合适的方式是使用“size”属性。以下是一个示例，注意在“modal-dialog”类中使用“modal-sm”，表示小型模态。它可以包含“sm”表示小型，"md"表示中等和“lg”表示大型的值。

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

- Tum

---

已经将其添加到我的答案中 :) - Tum

这不应该成为最佳答案吗？我想最佳答案可以帮助您定制它，但大多数使用情况应该可以满足Bootstrap的内置类。 - WebSpanner

我正在使用Bootstrap 3.x，但似乎没有modal-md类。 - James Poulose

Answer 6

对于Bootstrap 3，以下是如何操作的。

在你的HTML标记中添加一个modal-wide样式（从Bootstrap 3文档中的示例进行了调整）

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

并添加以下CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

现在无需覆盖 Bootstrap 3 中的 margin-left 即可使其居中。

- Dave Sag

---

为了避免混淆，没有技术上的原因需要添加“modal-wide”类，这意味着它不是Bootstrap的“内部”类。你可以简单地使用#myModal .modal-dialog { width: 80%; }。 - Gavin

是的。但将其作为样式来完成可以使其更具可重用性。 - Dave Sag

是的，我明白。只是有时很难区分引导类和自定义类之间的区别，所以我想做个笔记。 - Gavin

Answer 7

在 Bootstrap 3 中，你所需要的就是这个。

<style>
    .modal .modal-dialog { width: 80%; }
</style>

以上大部分回答对我都没有用！！！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</center>

- Alupotha

---

你知道如何改变模态框的高度吗？谢谢你的回答，它非常有效 :) - FrenkyB

Answer 8

这个解决方案来自这个页面。

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

- Roman

Answer 9

在Bootstrap的v3版本中，有一种简单的方法可以使模态框变大。只需在modal-dialog旁边添加class modal-lg即可。

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

- Dave

---

为什么要踩我？它完美地给了我一个漂亮的宽对话框！而且只使用了“正确”的Bootstrap类！ - Dave

尝试将一些HTML元素回退 - 使用最简单的结构来测试它。 - Dave

Answer 10

Bootstrap 3：为了保持小型和超小型设备的响应功能，我采取了以下措施：

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

- user2823201

---

没错，这对我有效。别忘了将宽度属性更改为XX％以实现响应式布局。顺便说一下，我的版本是3.0.3。 - Jerry Chen