I tried the following:
-
Try something like the following (see live jsfiddle example here: http://jsfiddle.net/periklis/hEThw/1/)
<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
讨论(0)
-
If you want to make it responsive with just CSS, use this:
.modal.large {
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
Note 1: I used a .large
class, you could also do this on the normal .modal
Note 2: In Bootstrap 3 the negative margin-left may not be needed anymore (not confirmed personally)
/*Bootstrap 3*/
.modal.large {
width: 80%;
}
Note 3: In Bootstrap 3 and 4, there is a modal-lg
class. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.
In some application fixed
modals are used, in that case you could try width:80%; left:10%;
(formula: left = 100 - width / 2)
讨论(0)
-
Achieved expected result using,
.modal-dialog {
width: 41% !important;
}
讨论(0)
-
For Bootstrap 3
here's how to do it.
Add a modal-wide
style to your HTML markup (as adapted from the example in the Bootstrap 3 docs)
<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
and add the following CSS
.modal-wide .modal-dialog {
width: 80%; /* or whatever you wish */
}
There is no need to override margin-left
in Bootstrap 3
to get this to be centered now.
讨论(0)
-
Preserve the responsive design, set the width to what you desire.
.modal-content {
margin-left: auto;
margin-right: auto;
max-width: 360px;
}
Keep it simple.
讨论(0)
-
Rather than using percentages to make the modal responsive, I find there can be more control taken from using the columns and other responsive elements already built into bootstrap.
To make the modal responsive/the size of any amount of columns:
1) Add an extra div around the modal-dialog div with a class of .container -
<div class="container">
<div class="modal-dialog">
</div>
</div>
2) Add a little CSS to make the modal full width -
.modal-dialog {
width: 100% }
3) Alternatively add in an extra class if you have other modals -
<div class="container">
<div class="modal-dialog modal-responsive">
</div>
</div>
.modal-responsive.modal-dialog {
width: 100% }
4) Add in a row/columns if you want various sized modals -
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="modal-dialog modal-responsive">
...
</div>
</div>
</div>
</div>
讨论(0)