使用Bootstrap 3将行居中
使用Bootstrap 3将行居中
提问于 2013-11-13 06:38:31
如何在Bootstrap 3中将行(12列)居中？我不想使用offset
我正在使用这种方法，但没有工作。
.col-centered{
float: none;
margin: 0 auto;
} <div class="row" style="max-width: 300px;">
<div class="col-md-12 col-xs-12 col-centered">
<div class="input-group">
<div class="input-group-btn">
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
<ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
<li><a href="#"> Test 1 </a></li>
<li><a href="#"> Test 2 </a></li>
<li><a href="#"> Test 3 </a></li>
<li><a href="#"> Test 4 </a></li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
对此有什么解决方案吗？我对这项工作一无所知。
回答 12
Stack Overflow用户
回答已采纳
发布于 2013-11-13 06:52:34
您所做的是不起作用的，因为您对全宽列应用了margin: auto。
将其包装在div中，并将其居中。例如：
<div class="i-am-centered">
<div class="row">...</div>
</div>。
.i-am-centered { margin: auto; max-width: 300px;}不管怎样，这是一个更干净的解决方案，因为它更具表现力，而且你通常不想弄乱网格。
Stack Overflow用户
发布于 2014-03-01 20:11:55
为什么不使用网格系统呢？
bootstrap网格系统由12列组成，因此如果使用“中”列，它的宽度将为970px。
然后，您可以将其划分为3列(12/3=4)，因此使用3个div和"col-md-4“类：
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>每一个都有323px的最大宽度大小。保留第一个和最后一个为空，使用中间的来获取内容中心：
<div class="col-md-4"></div>
<div class="col-md-4">
<p>Centered content.</p>
</div>
<div class="col-md-4"></div>Stack Overflow用户
发布于 2018-07-20 01:39:16
我知道这个问题是专门针对Bootstrap3的，但如果Bootstrap4的用户遇到这个问题，下面是我如何在v4中将行居中的：
<div class="container">
<div class="row justify-content-center">
...有关此主题的更多信息，请参阅bootstrap site。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19941414
复制相关文章
相似问题