时间戳

首页 > 解决方案 > 模态对话框的大小和标题位置

css - 模态对话框的大小和标题位置

问题描述

提前致谢。我有模态对话框和两个问题。我正在使用 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>

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

PS 来自 w3schools 的原始代码包含引导 3.4.0 库。如果我使用它们，一切都很好，除了一件事。我的项目有gridview。它有两列，它们的标题标题居中对齐。如果我使用 bootstrap 3.4.0 库，标题是左对齐的，我无法更改它们。其实，我并没有深入研究这个问题。我专注于引导 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 条目。我需要更改或添加哪个条目？

标签： cssbootstrap-modal

解决方案

您尚未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>

推荐阅读