模态对话框的大小和标题位置答案

【问题标题】：Size and Header Position of Modal Dialog模态对话框的大小和标题位置
【发布时间】：2020-02-03 16:29:03
【问题描述】：

提前致谢。我有模态对话框和两个问题。我正在使用 bootstrap.min.css 和 bootstrap.min.js。我没有更改 bootstrap.min.css 文件中的任何内容。

我的问题：

1. 我不知道为什么，但标题文本右对齐，关闭按钮位于其左侧。如何做标题文本的左对齐和关闭按钮的右对齐？请看图片。

我从 w3schools.com 获得了代码来处理它。

代码如下：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#testmodal">Open Modal</button>

<!-- Modal -->
<div id="testmodal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title">Test</h1>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
      </div>
      </div>
    </div>
  </div>

我使用 bootstrap 4.3.1 库。

<link href="/style/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>

附： w3schools 的原始代码包含引导程序 3.4.0 库。如果我使用它们，一切都很好，除了一件事。我的项目有gridview。它有两列，它们的标题标题居中对齐。如果我使用 bootstrap 3.4.0 库，标题是左对齐的，我无法更改它们。其实，我并没有深入研究这个问题。我专注于 bootstrap 4.3.1 库的问题。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

2. 我需要增加模态窗口的宽度。我尝试了一些代码，但它支持最大。 500 像素。我在 .css 文件中找不到 500px 条目。我需要更改或添加哪个条目？

【问题讨论】：

这真的不是 C# 或 ASP.NET 问题。这一切都由css 和Bootstrap 处理。如果您删除 C# 标签并为 css 和 Bootstrap 添加标签，您将获得更好的答案
你好@Flydog57，我编辑了标签。谢谢。

标签： css bootstrap-modal

【解决方案1】：

你没有在标题中声明class="modal-title"。

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
    <h1 class="modal-title">Test</h1>
</div>

【讨论】：

你好@sebu，谢谢你的回答。我添加了您的建议，但没有任何改变。
@echelon 请用完整的模态代码和您使用的引导库更新您的问题。
嗨@sebu，感谢您抽出宝贵时间。我更新了我的问题并添加了更多详细信息。
嗨@sebu，我使用了一个使用引导程序4创建模态的示例，问题已解决。再次感谢您。