Możesz wybierać między klasami modal-lgi modal-xllub jeśli chcesz mieć niestandardową szerokość, ustaw właściwość max-width za pomocą wbudowanego css. Na przykład,
W Bootstrap domyślna szerokość modal-dialogto 600px. Ale możesz wyraźnie zmienić jego szerokość. Na przykład, jeśli chcesz zmaksymalizować jego szerokość do wybranej wartości 800px, wykonaj następujące czynności:
.modal-dialog {
width:800px;
margin:30pxauto;}
Uwaga : ta zmiana dotyczy wszystkich modalnych okien dialogowych używanych w aplikacji. Sugeruję również, że najlepiej jest mieć zdefiniowane własne reguły CSS i nie dotykać rdzenia frameworka.
Jeśli chcesz, aby było ustawione tylko dla określonego okna dialogowego, użyj własnej chwytliwej nazwy klasy, modal-800której szerokość jest ustawiona na 800px, w następujący sposób:
Miałem dużą siatkę, która musiała być wyświetlona w trybie modalnym, a samo zastosowanie szerokości do ciała nie działało poprawnie, ponieważ tabela była przepełniona, chociaż zawierała klasy ładowania początkowego. Skończyło się na nałożeniu tej samej szerokości na modal-bodyi modal-content:
Jeśli chcesz zachować responsywność modalną, użyj% szerokości zamiast pikseli. Możesz to zrobić bezpośrednio (patrz poniżej) lub za pomocą CSS.
<divclass="modal fade"id="phpModal"role="dialog"><divclass="modal-dialog modal-lg"style="width:80%;"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button><h4class="modal-title">HERE YOU TITLE</h4></div><divclass="modal-body helpModal phpModal">
HERE YOUR CONTENT
</div></div></div></div>
Jeśli używasz CSS, możesz nawet zrobić różne% dla modal-sm i modal-lg.
Napotkałem również ten sam problem podczas zwiększania szerokości modalu, okno nie wyświetla się na środku. Po obejściu znalazłem poniższe rozwiązanie.
<divclass="modal"id="myModal"><divclass="modal-dialog"style="width:xxxpx;"><!-- Set width of div which you want --><divclass="modal-content">
Lorem Ipsum some text...content
</div></div></div>
Bootstrap udostępnia również klasy do ustawiania szerokości div.
gdzie możemy określić szerokość modalu jako procent ekranu.
Oto działający przykład, aby zademonstrować to samo:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><scripttype="text/javascript">
$(document).ready(function(){
$(".modal-dialog").css("width","90%");});</script></head><body><divclass="container"><h2>Modal Example</h2><!-- Trigger the modal with a button --><buttontype="button"class="btn btn-info btn-lg"data-toggle="modal"data-target="#myModal">Open Modal</button><!-- Modal --><divclass="modal fade"id="myModal"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button><h4class="modal-title">Modal Header</h4></div><divclass="modal-body"><p>Some text in the modal.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></div></div></div></div></div></body></html>
Przypuszczam, że dzieje się tak z powodu ustawienia maksymalnej szerokości modalu na 500px i maksymalnej szerokości modalu-lg to 800px Przypuszczam, że ustawienie tego na auto sprawi, że modal będzie reagował
Odpowiedzi:
W swoim kodzie dla elementu
modal-dialog
div dodaj kolejną klasęmodal-lg
:Lub jeśli chcesz wyśrodkować okno modalne, użyj:
źródło
Najprościej można zastosować styl wbudowany w
modal-dialog
div:źródło
W moim przypadku,
modal-lg
Klasa nie była wystarczająco szeroka.więc rozwiązanie było
i użyj powyższej klasy zamiast
modal-lg
classźródło
Możesz wybierać między klasami
modal-lg
imodal-xl
lub jeśli chcesz mieć niestandardową szerokość, ustaw właściwość max-width za pomocą wbudowanego css. Na przykład,lub
źródło
W Bootstrap 3 musisz zmienić modalne okno dialogowe. W tym przypadku możesz dodać klasę modal-admin w miejscu, w którym stoi okno dialogowe modalne.
źródło
W Bootstrap domyślna szerokość
modal-dialog
to600px
. Ale możesz wyraźnie zmienić jego szerokość. Na przykład, jeśli chcesz zmaksymalizować jego szerokość do wybranej wartości800px
, wykonaj następujące czynności:Uwaga : ta zmiana dotyczy wszystkich modalnych okien dialogowych używanych w aplikacji. Sugeruję również, że najlepiej jest mieć zdefiniowane własne reguły CSS i nie dotykać rdzenia frameworka.
Jeśli chcesz, aby było ustawione tylko dla określonego okna dialogowego, użyj własnej chwytliwej nazwy klasy,
modal-800
której szerokość jest ustawiona na800px
, w następujący sposób:HTML
CSS
Podobnie, możesz mieć nazwę klasy opartą na rozmiarze szerokości, takim jak
modal-700
szerokość700px
.Mam nadzieję, że to pomocne!
źródło
Miałem dużą siatkę, która musiała być wyświetlona w trybie modalnym, a samo zastosowanie szerokości do ciała nie działało poprawnie, ponieważ tabela była przepełniona, chociaż zawierała klasy ładowania początkowego. Skończyło się na nałożeniu tej samej szerokości na
modal-body
imodal-content
:źródło
Jeśli chcesz zachować responsywność modalną, użyj% szerokości zamiast pikseli. Możesz to zrobić bezpośrednio (patrz poniżej) lub za pomocą CSS.
Jeśli używasz CSS, możesz nawet zrobić różne% dla modal-sm i modal-lg.
źródło
Napotkałem również ten sam problem podczas zwiększania szerokości modalu, okno nie wyświetla się na środku. Po obejściu znalazłem poniższe rozwiązanie.
źródło
Właściwie to stosujesz CSS w modalnym div.
musisz zastosować CSS na .modal-dialog
Na przykład zobacz poniższy kod.
Bootstrap udostępnia również klasy do ustawiania szerokości div.
Do małych zastosowań modalnych
modal-sm
I dla dużego modalu
modal-lg
źródło
Najprościej to zrobić:
gdzie możemy określić szerokość modalu jako procent ekranu.
Oto działający przykład, aby zademonstrować to samo:
źródło
W swoim kodzie, dla div modal-dialog, dodaj kolejną klasę, modal-lg:
użyj modal-xl
źródło
Przypuszczam, że dzieje się tak z powodu ustawienia maksymalnej szerokości modalu na 500px i maksymalnej szerokości modalu-lg to 800px Przypuszczam, że ustawienie tego na auto sprawi, że modal będzie reagował
źródło
Wartość margin left to połowa szerokości modalu. Używam tego z motywem Maruti Admin, ponieważ nie ma on klasy
.modal-lg .modal-sm
źródło