twitter-bootstrap Bootstrap Modal 中的中心形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27303402/
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
center form in Bootstrap Modal
提问by Bernd
My Question is, how to center the complete form (input fields with labels) in the modal.
我的问题是，如何在模式中将完整的表单（带有标签的输入字段）居中。
Here is also the fiddle: http://jsfiddle.net/beernd/reh0ookq/but the snippet here should also work.
这也是小提琴：http: //jsfiddle.net/beernd/reh0ookq/但这里的片段也应该有效。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="useradd" class="form-horizontal" role="form" method="post">
<div class="modal show" id="useradd_modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title text-center text-danger">Adding a user</h4>
</div><!-- /.modal-header -->
<div class="modal-body">
<div class="form-group">
<label class="col-sm-2 col-md-2 control-label">Login-Name:</label>
<div class="col-sm-4 col-md-4">
<input class="form-control" type="text" placeholder="Login-Name" value="" name="ua_loginname" required="required" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-2 control-label">Firstname:</label>
<div class="col-sm-3 col-md-3">
<input class="form-control" type="text" placeholder="Firstname" value="" name="ua_fname" required="required"/>
</div>
</div>
</div><!-- /.modal-body -->
<div class="modal-footer">
<input class="btn btn-md btn-danger pull-left" data-dismiss="modal" type="submit" value="User add"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /.modal-footer -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>I've tried many other solutions like adding
style="text-align: center;"and adding to the inputs style="margin 0 auto;"Like this
我试着像加很多其他的解决方案
style="text-align: center;"，并增加了输入style="margin 0 auto;"筛选
or added an id with display: inline-block;and class with text-align: centerbut all other solutions didn't worked for me.
或添加一个 iddisplay: inline-block;和 class withtext-align: center但所有其他解决方案对我不起作用。
采纳答案by JarODirt
Use:
利用：
class="text-center"
See: [1]: http://jsfiddle.net/reh0ookq/1/
参见： [1]：http://jsfiddle.net/reh0ookq/1/
I have used it on the entire form, as well as one input
我在整个表单以及一个输入中都使用了它
The above only works if you want just text/labels
以上仅当您只需要文本/标签时才有效
The below will fix the entire input.
下面将修复整个输入。
The issue is the bootstrap columns system. If you want a column to be centered, you can give it the class "center-block" and then extend the column to be total for that row (12 is the max). If you want the label to appear next to the input in full screen, you will have to nest another row inside the center-block column div and handle further columns inside that.
问题是引导列系统。如果您希望一列居中，您可以给它类“center-block”，然后将该列扩展为该行的总数（12 是最大值）。如果您希望标签全屏显示在输入旁边，则必须在中心块列 div 内嵌套另一行并处理其中的其他列。
回答by Tim Lewis
If you're looking to center the actual inputs, you need some offsets. There isn't a col-*-*class that makes it appear in the center of the row, but you can use offsets as such:
如果您希望将实际输入居中，则需要一些偏移量。没有一个col-*-*类使它出现在行的中心，但您可以使用偏移量：
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h4>Pretend this is a Modal</h4>
</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<label>Login-Name</label>
</div>
<div class="col-xs-4">
<input class="form-control" name="test1" placeholder="Login-Name" type="text">
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<label>First Name</label>
</div>
<div class="col-xs-4">
<input class="form-control" name="test2" placeholder="Firstname" type="text">
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-2">
<label>Login-Name</label>
</div>
<div class="col-xs-10">
<input class="form-control" name="test1" placeholder="Login-Name" type="text">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<label>First Name</label>
</div>
<div class="col-xs-10">
<input class="form-control" name="test2" placeholder="Firstname" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
EDITLabels added, 2 layouts proposed.
添加了编辑标签，建议了 2 种布局。
