]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
update modal footers to use text-align instead of float on buttons for alignment
authorMark Otto <markotto@twitter.com>
Thu, 23 Feb 2012 06:38:54 +0000 (22:38 -0800)
committerMark Otto <markotto@twitter.com>
Thu, 23 Feb 2012 06:38:54 +0000 (22:38 -0800)
docs/assets/bootstrap.zip
docs/assets/css/bootstrap.css
docs/javascript.html
docs/templates/pages/javascript.mustache
less/modals.less

index cfcd0737917cf1131dc4b664f453dd3050df9df9..b7bcc0f5325ac052e2b7183a2c4280f2539a5ab0 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
index eb459012e658ac115a3416880de3b7f5379b2c4f..e47dbb25fdcfd1a526f74692e24bf82d6742626e 100644 (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;
 }
index 2cb0c0938766dbaa9066d50e5bad388ea68b1760..74839da7d827a5e887a71a5256b8e5e4eeffcb83 100644 (file)
                 <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 -->
               <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>
     &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>
index 5500b59df7e07c2e6250eb913779fee07ab230a9..83f3b21f193b49a51776b9233193b0d9cf08245a 100644 (file)
                 <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 -->
               <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>
     &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>
index 71977307ff87dfcec05af2897c29485cf3b88ed0..a6d8694c110a49d3a60bdd82c550800d45fe954d 100644 (file)
 .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
   }