Центр Содержимое контейнера строк Bootstrap

У меня есть код ниже, и я бы хотел сосредоточить "хорошие" элементы внешнего "row" div. Я пробовал различные подходы, такие как text-align: center (который просто центрирует текст, а не внутренние элементы DIV.

Вот jsfiddle. Идея состоит в том, что я получаю страницу с "хорошо" плитами и после 4 или около того она обертывается. Но если оно меньше 4, они должны располагаться по центру страницы.

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>

Ответы

Ответ 1

Я решил это, выполнив следующее:

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

Ответ 2

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

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

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

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

Ответ 3

С помощью Bootstrap 4 для этого есть класс css. Ниже будет показано содержимое строки:

<div class="row justify-content-center">
  ...inner divs and content...
</div>

Подробнее см. https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment.

Ответ 4

Поместите контейнер внутри своей строки, и он центрирует содержимое для вас.

<body class="container-fluid">
    <div class="row">
        <div class="container">
           content goes here...
        </div>
    </div>
</body>