使用Bootstrap 3将一行居中 [英] center a row using Bootstrap 3

问题描述

如何在Bootstrap 3中将一行(12列)居中? 我不想使用offset

How to center a row (12 column) in Bootstrap 3 ? I do not want to use the offset

我正在使用这种方式，但是没有用.

I am using this way but not worked.

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

对此有什么解决办法吗?我不知道这项工作.

Is there any solution to this? I have not an idea for this work.

推荐答案

您正在执行的操作无效，因为您将margin:auto应用于全角列.

What you are doing is not working, because you apply the margin: auto to the full-width column.

将其包装在div中，然后将其居中.例如:

Wrap it in a div and center that one. E.g:

<div class="i-am-centered">
  <div class="row">...</div>
</div>

.

.i-am-centered { margin: auto; max-width: 300px;}

http://www.bootply.com/93751

无论如何，它都是一种更清洁的解决方案，因为它更具表现力，而且通常不希望使网格混乱.

Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.

这篇关于使用Bootstrap 3将一行居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！