引導模態：左，右模態頁腳

我對正確的一些按鈕和文本在左邊。我想要這些垂直對齊。如果您在其下放置標尺，則文本應位於同一行上。我似乎無法做到這一點。

任何想法？

<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>

來源

2014-06-25 Wesley

只要給div提問的高度與您的按鈕高度相同。你的情況是line-height: 34px;。爲垂直對齊與按鈕上的文本和pull-left左對齊頁腳文本form-control-static：

Updated Fiddle

來源

2014-06-25 13:08:49 Sebsemillia

你可以簡單地添加文本中應用了span 2原生自舉類。

不需要額外的浮動div，這些按鈕已經被modal-footer類正確對齊。你甚至可以通過分別採用input-lg和btn-lg類的跨度和按鈕調整文本和buttonsizes例如：

<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>

來源

2017-04-07 07:07:18

引導模態：左，右模態頁腳

回答

相關問題