Как установить Bootstrap div col start из центра?

Question

как изменить этот макет на этот макет Что мне нужно, так это то, что добавляемый контент всегда начинается с центра и распространяется на обе стороны. Так же, как второе изображение. Возможно ли это?

Вот мой код

<div class="container main_container">
        <h2 class="product-title">Produk</h2>
        @foreach (var item in Model.Product)
        {
            <div class="col-sm-6 col-md-4 col-xs-12 product-container">
                <div class="product_in">
                    <div class="product_hover col-sm-6 col-xs-12">
                        <img class="product_img" src="~/images/@(item.Image)" alt="@item.Nama">
                        <div class="product_info">
                            <h4 class="Gotham-Ultra">@item.Nama</h4>
                            <p class="Gotham-Book-2">
                                @Html.Raw(item.Deskripsi)
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

Спасибо

Answer 1

Попробуйте:

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box" style="margin-bottom:20px;">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
                <div class="card">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 2

Если вы используете Bootstrap Версия 4.0, у вас есть несколько встроенных классов для достижения этого, используйте фрагмент ниже.

<div class="container main_container d-flex justify-content-center">
  <div class="col-xs-12 col-sm-12 text-center">
    <h2 class="product-title">Produk</h2>
  </div>

    @foreach (var item in Model.Product)
    {
        <div class="col-sm-6 col-md-4 col-xs-12 product-container">
            <div class="product_in">
                <div class="product_hover col-sm-6 col-xs-12">
                    <img class="product_img" src="~/images/@(item.Image)" alt="@item.Nama">
                    <div class="product_info">
                        <h4 class="Gotham-Ultra">@item.Nama</h4>
                        <p class="Gotham-Book-2">
                            @Html.Raw(item.Deskripsi)
                        </p>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

Если вы не используете Bootstrap Версия 4.0, дайте мне знать, тогда я предоставлю вам другое решение.

Answer 3

если вы используете display: flex;

необходимо добавить: justify-content: center;

С уважением