Bootstrap Modal: Trái và phải nội dung liên kết ở chân trang modal

Question

tôi có phương thức này:

http://jsfiddle.net/DTcHh/482/

Tôi có một số nút trên bên phải, và văn bản bên trái. Tôi muốn những để được sắp xếp theo chiều dọc. Các văn bản phải trên cùng một dòng nếu bạn đặt một người cai trị dưới nó. Tôi dường như không thể có khả năng để làm điều này.

Bất kỳ ý tưởng nào?

<div class="modal-footer" style="margin-top:0;"> 
    <div style="float:left;color:#737373;font-style:italic"><strong>test:</strong> - <a href="#">advanced</a></div> 
    <div style="float:right"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="button" class="btn btn-primary" data-loading-text="Submitting...">Send Message</button> 
    </div> 
</div> 

Answer 1

Chỉ cần cung cấp chiều cao dòng giống như chiều cao nút của bạn.

Trong trường hợp của bạn nó sẽ là line-height: 34px;.

Updated Fiddle

Answer 2

Bạn chỉ có thể thêm văn bản trong một span với 2 lớp bootstrap mẹ đẻ áp dụng: form-control-static cho chiều dọc sắp xếp văn bản với các nút và pull-left cho trái sắp xếp văn bản ở chân.

Không cần thêm div nổi, các nút sẽ được căn chỉnh ngay bởi lớp modal-footer. Bạn thậm chí có thể điều chỉnh giáo khoa và buttonsizes ví dụ bằng cách áp dụng input-lg và btn-lg lớp đến khoảng và các nút tương ứng:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <span class="form-control-static pull-left">Example vertically aligned text</span> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>