CSS Bootstrap 模态：模态页脚中左右对齐的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24409495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal: Left and right aligned content in modal footer
提问by Wesley
I have this modal:
我有这个模态：
http://jsfiddle.net/DTcHh/482/
http://jsfiddle.net/DTcHh/482/
I have some buttons on the right, and text on the left. I want these to be aligned vertically. The text should be on the same line if you place a ruler under it. I can't seem to be able to do this.
我在右边有一些按钮，在左边有文字。我希望这些垂直对齐。如果在文本下放置标尺，文本应该在同一行上。我似乎无法做到这一点。
Any ideas?
有任何想法吗？
<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>
回答by Philip Bijker
You could simply add the text in a spanwith 2 native bootstrap classes applied: form-control-staticfor vertically aligning the text with the buttons and pull-leftfor left aligning the text in the footer.
您可以简单地在应用了span2 个本机引导程序类的情况下添加文本：form-control-static用于将文本与按钮垂直对齐以及pull-left用于左对齐页脚中的文本。
There's no need for the extra floating divs, the buttons will already be right aligned by the modal-footerclass. You can even adjust text- and buttonsizes for example by applying input-lgand btn-lgclasses to the span and buttons respectively:
不需要额外的浮动 div，按钮已经由modal-footer类右对齐。您甚至可以调整文本和按钮大小，例如分别将input-lg和btn-lg类应用到跨度和按钮：
<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">×</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>回答by Sebsemillia
Just give the divin question the same line-height as your button height is.
只需将有div问题的行高与您的按钮高度相同即可。
In your case it would be line-height: 34px;.
在您的情况下，它将是line-height: 34px;.
