Центрировать строку, используя Bootstrap 3

Как центрировать строку (12 столбцов) в Bootstrap 3? Я не хочу использовать 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>

Ответ 1

То, что вы делаете, не работает, потому что вы применяете margin: auto для столбца полной ширины.

Оберните его в div и центрируйте его. Например:

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

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

http://www.bootply.com/93751

Это более чистое решение, так как оно более выразительно и, как правило, вы не хотите возиться с сеткой.

Ответ 2

Почему бы не использовать сетку?

Система сетки бутстрапов состоит из 12 столбцов, поэтому, если вы используете столбцы "Средний", размер будет иметь размер ширины 970 пикселей.

Затем вы можете разделить его на 3 столбца (12/3 = 4), поэтому используйте 3 divs с классом "col-md-4":

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

Каждый из них будет иметь максимальный размер ширины 323 пикселей. Сохраните первый и последний пустые и используйте средний, чтобы получить свой контент centerd:

<div class="col-md-4"></div>
<div class="col-md-4">
   <p>Centered content.</p>
</div>
<div class="col-md-4"></div>

Ответ 3

Вместо

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

Вы можете просто использовать

<div class="col-md-4 col-md-offset-4"></div>

Пока вы ничего не хотите в столбцах 1 и 3, это более элегантное решение. Смещение "добавляет" 4 столбца спереди, после чего вы получаете 4 "запасных".

PS Я понимаю, что в начальном вопросе не указаны смещения, но по крайней мере один предыдущий ответ использует взлома CSS, который не нужен, если вы используете смещения. Поэтому для полноты я думаю, что это действительно.

Ответ 4

вы можете использовать сетку без добавления пустых столбцов

<div class="col-xs-2 center-block" style="float:none"> ... </div>

измените col-xs-2 в соответствии с вашим расположением.

проверить предварительный просмотр: http://jsfiddle.net/rashivkp/52VtD/5535/

Ответ 5

Мы также можем использовать col-md-offset, как это, это избавит нас от дополнительного кода div. Поэтому вместо трех divs мы можем использовать только один div:

<div class="col-md-4 col-md-offset-4">Centered content</div>

Ответ 6

Просто используйте класс текстового центра

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>

Ответ 7

Попробуйте, это сработает!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</div>
        </div>
    </div>
</div>

Затем в css определите ширину центра div и центра в документе:

.center {
    margin: 0 auto;
    width: 80%;
}

Ответ 8

Добавьте это в свой css:

.row-centered {
   text-align:center;
}


.col-centered {
   display:inline-block;
   float:none;
   /* reset the text-align */
   text-align:left;
   /* inline-block space fix */
   margin-right:-4px;
}

Затем в вашем коде HTML:

    <div class=" row row-centered">
        <div class="col-*-*  col-centered>
           Your content
        </div>
    </div>

Ответ 9

Я использую text-align-center в строке, подобной этой

<div class="row tac">
    <h1>Centered content</h1>
</div>

<style>
 .tac { text-align: center}
</style>

Ответ 10

Я использую этот мир кода, и у меня есть успешный

<div class="row  center-block">
<div style="margin: 0 auto;width: 90%;"> 
    <div class="col-md-12" style="top:10px;">
    </div>
    <div class="col-md-12" style="top:10px;">
    </div>
 </div>