我对此很陌生,尤其是 Bootstrap。我有这个代码:
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
我需要将此输入字段和按钮放在页面中央:
这不起作用:"margin-left: auto; margin-right:auto;"
有人有什么想法吗?
您可以使用偏移量使列显示居中,只需使用等于行剩余大小一半的偏移量,在您的情况下,我建议使用col-lg-4
with col-lg-offset-4
, 那是(12-4)/2
.
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
演示小提琴 http://jsfiddle.net/koala_dev/akVd3/show
请注意,此技术仅适用于偶数列大小(.col-X-2
, .col-X-4
, col-X-6
等...),如果您想支持任何尺寸,您可以使用margin: 0 auto;
但您也需要从元素中删除浮动,我建议使用自定义 CSS 类,如下所示:
.col-centered{
margin: 0 auto;
float: none;
}
演示小提琴 http://jsfiddle.net/koala_dev/akVd3/1/show
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)