update modal footers to use text-align instead of float on buttons for alignment

This commit is contained in:
Mark Otto 2012-02-22 22:38:54 -08:00
parent 8609a77bd2
commit 0e8427e7b1
5 changed files with 13 additions and 11 deletions

Binary file not shown.

View File

@ -3064,6 +3064,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
@ -3081,8 +3082,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.modal-footer:after {
clear: both;
}
.modal-footer .btn {
float: right;
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}

View File

@ -214,8 +214,8 @@
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div> <!-- /well -->
@ -250,8 +250,8 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn" data-dismiss="modal" >Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
@ -309,8 +309,8 @@
&lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

View File

@ -138,8 +138,8 @@
<p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
</div> <!-- /well -->
@ -174,8 +174,8 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
@ -233,8 +233,8 @@
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

View File

@ -71,13 +71,15 @@
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
.btn {
float: right;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}