Bootstrap 4: добавить подзаголовок к модальному
На самом деле я создаю веб-сайт и использую Bootstrap, поскольку он очень эффективен и дает возможность каждому узнать, как работает мой веб-сайт.
Но дело в том, что я пытаюсь использовать модальное окно для отображения некоторых вещей, и мне нужно вставить в это субтитры, я уже пробовал несколько вещей, но все они работали правильно.
Мой идеальный модальный код выглядел бы так:
Я предполагаю, что решение находится в файлах HTML и CSS, но я новичок в этих способах работы, поэтому даже прочитав официальную модальную страницу CSS Bootstrap, мне не удалось найти способ сделать это.
Я уже пробовал:
- Добавление другого заголовка
divвнутри модального заголовка и небольшого редактирования css, но не удалось получить то, что я ищу- попытался использовать свойство
width, чтобы заставить заголовок занимать всю строку, но не сработало. - пробовал использовать атрибут
justify-content, так как мы используем флексбоксы, но тоже не сработало.
- попытался использовать свойство
- Прямое добавление другого заголовка (
h5) внутри заголовка, но с тем же результатом, что и дляdiv
Заранее благодарим за ваше время и помощь.
Привет, я добавил точную картину того, что я ищу, для большей ясности, спасибо за совет, который вы дали в своем комментарии.
Ответы 4
Для заголовка и подзаголовка с полями вы можете оставить отступ слева. Например:
<h1>Title</h1>
<h2 class = "pl-2">Sub Title</h2>
Для дальнейшей демонстрации я создал для вас образец модального окна. Перейти к: https://www.pateladitya.com/stackoverflow/modal-sample-dual-title.html
Я думаю, что проблема в каком-то css. Убедитесь, что заголовок и подзаголовок не отображаются встроенными.
Это не то, что я ищу в бутстрапе, это невозможно сделать так в модальном окне.
Вы можете где-нибудь поделиться своим кодом? Может дать ссылку.
Я добавил изображение того, что я ищу, поверх сообщения, спасибо за вашего коллегу по работе, но это не то, что я действительно ищу.
Хорошо, я понял. Я обновил приведенную выше ссылку тем, что вы хотели. Проблема заключалась в том, что по умолчанию для модального заголовка установлено значение display: flex. Итак, я сделал это для отображения блока и создал внутри него структуру div.
Спасибо друг ! Это было то, что я искал, я ценю ваше участие. Я думаю, что способ сделать это похоже, но есть ли у вас идея правильно отображать нижний колонтитул в левой части того, который уже существует? (как я изобразил на моем изображении). Еще раз спасибо, ты мне очень помог, дружище.
Пожалуйста. Это то, для чего существует сообщество. Я обновил ссылку на то, что вы хотели.
Не могли бы вы принять это как ответ, чтобы он разрешился?
В настоящее время вы находитесь на элементе h4, поэтому самое простое, что вы можете сделать для себя, - это уменьшить свой заголовок, может быть, до h2 или h1, пока вы не будете удовлетворены.
Вы пробовали использовать Flexbox?
<div style = "flex-direction:column;">
<h1 class = "modal-title">Title</h5>
<h2>Sub Title</h2>
</div>
Это работает, но вместо стиля я предпочитаю использовать класс: <div class = "flex-column">
Дом отображает для меня субтитры, используя bootstrap 4 со следующим jsx:
<div class = "modal-header">
<h4 class = "modal-title">SUPER TITLE
<br>
<small>SUB-TITLE</small>
</h4>
</div>
Кроме того, в моем тестировании вложенность h5 (подзаголовок) внутри h4 также работала ... Так что я удивлен, что это не сработало для вас. Однако я не публиковал этот ответ, потому что он также выдает предупреждение, если вы пытаетесь вложить заголовки:
Warning: validateDOMNesting(...): react
<h5>cannot appear as a child of<h4>
Еще одна приятная особенность этого подхода заключается в том, что если вам нужен заголовок меньшего или большего размера, субтитры не нуждаются в какой-либо корректировке, так как они всегда будут относительно smaller, что позволяет избежать каких-либо изменений кода.
Пожалуйста, опубликуйте код, который вы пытались. Мы не сможем помочь, если не поймем, что вы пробовали, и объяснение в вопросе не поможет. «Вопросы, требующие помощи при отладке (« почему этот код не работает? ») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе».