模式对话框的大小和标题位置

Question

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

我的问题：

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

Modal Window

我从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>

我使用引导程序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>

P.S。 w3schools的原始代码包含bootstrap 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。我需要增加模态窗口的宽度。我尝试了一些代码，但它支持max。 500px。我在.css文件中找不到500px条目。我需要更改或添加哪个条目？

Answer 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>