Размер и положение заголовка модального диалога - PullRequest
Новая
       3

Размер и положение заголовка модального диалога

0 голосов
/ 05 октября 2019

спасибо заранее. У меня есть модальный диалог и две проблемы. Я использую 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. Мне нужно увеличить ширину модальных окон. Я пробовал некоторые коды, но он поддерживает макс. 500px. Я не смог найти запись 500px в файле .css. Какую запись мне нужно изменить или добавить?

1 Ответ

0 голосов
/ 05 октября 2019

Вы не объявили 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>
...