я пробовал это, но пошел не так
здесь css
body .modal-ku {
width: 750px;
}
и здесь неудачный результат
я пробовал это, но пошел не так
здесь css
body .modal-ku {
width: 750px;
}
и здесь неудачный результат
В вашем коде для modal-dialog
div добавьте еще один класс: modal-lg
:
<div class="modal-dialog modal-lg">
Или, если вы хотите сосредоточить свой модальный диалог, используйте:
.modal-ku {
width: 750px;
margin: auto;
}
Самым простым способом может быть встроенный стиль в div modal-dialog
:
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:1250px;">
<div class="modal-content">
...
</div>
</div>
</div>
В моем случае,
modal-lg
был недостаточно широк.поэтому решение было
@media (min-width: 1200px) {
.modal-xlg {
width: 90%;
}
}
и использовать предыдущий класс вместо класса modal-lg
В Bootstrap 3 вам необходимо изменить модальный диалог. Таким образом, в этом случае вы можете добавить класс modal-admin в место, где стоит модальный диалог.
@media (min-width: 768px) {
.modal-dialog {
width: 600;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
}
В Bootstrap ширина modal-dialog
по умолчанию составляет 600px
. Но вы можете явно изменить его ширину. Например, если вы хотите увеличить его ширину до значения по вашему выбору, например 800px
, выполните следующие действия:
.modal-dialog {
width: 800px;
margin: 30px auto;
}
Примечание. Это изменение относится ко всем модальным диалогам, которые вы используете в своем приложении. Кроме того, мое предложение заключается в том, что лучше всего определять свои собственные правила CSS, а не касаться ядра системы.
Если вы хотите, чтобы он был установлен для определенного модального диалога, используйте собственное имя броского класса в качестве modal-800
, ширина которого равна modal-800
800px
, как 800px
ниже:
HTML
<div class="modal">
<div class="modal-dialog modal-800">
<div class="modal-content">
</div>
</div>
</div>
CSS
.modal-dialog.modal-800 {
width: 800px;
margin: 30px auto;
}
Аналогично, вы можете иметь имя класса, основанное на размере ширины, таком как modal-700
, ширина которого составляет modal-700
700px
.
Надеюсь, это полезно!
У меня была большая сетка, которую нужно было отображать в модальном режиме, и просто применение ширины к телу не работало правильно, так как таблица переполнялась, хотя на ней были классы начальной загрузки. В итоге я применил одинаковую ширину к modal-body
и modal-content
:
<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content" style="width:980px;">
<div class="modal-header">
<h5 class="modal-title" id="">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="la la-remove"></span>
</button>
</div>
<form class="m-form m-form--fit m-form--label-align-right">
<div class="modal-body" style="width:980px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!--end::Modal-->
Если вы хотите сохранить модальный отклик, используйте% от ширины вместо пикселей. Вы можете сделать это в строке (см. Ниже) или с помощью CSS.
<div class="modal fade" id="phpModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:80%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">HERE YOU TITLE</h4>
</div>
<div class="modal-body helpModal phpModal">
HERE YOUR CONTENT
</div>
</div>
</div>
</div>
Если вы используете CSS, вы можете использовать разные% для modal-sm и modal-lg.
Я предполагаю, что это происходит из-за того, что максимальная ширина модальности установлена равной 500 пикселей, а максимальная ширина модального-lg равна 800 пикселей. Предположим, что установка этого параметра автоматически сделает ваш модальный отзывчивый
На самом деле, вы применяете CSS к модальному div.
Вы должны применить CSS на .modal-диалоге
Например, см. Следующий код.
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
<div class="modal-content">
Lorem Ipsum some text...content
</div>
</div>
</div>
Bootstrap также предоставляет классы для установки ширины div.
Для малого модального использования modal-sm
И для больших модальных modal-lg
Вы можете выбирать между классами modal-lg и modal-xl или, если вы хотите использовать настраиваемую ширину, установить свойство max-width с помощью встроенного CSS. Например,
<div class="modal-dialog modal-xl" role="document">
или
<div class="modal-dialog" style="max-width: 80%;" role="document">
.your_modal {
width: 800px;
margin-left: -400px;
}
margin left value - половина модальной ширины. Я использую это с темой Maruti Admin, так как у нее нет класса .modal-lg.modal-sm