如何设置 Bootstrap div col 从中心开始？

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

如果你使用 display: flex;

需要添加：justify-content:center;

问候

Answer 2

试试这个：

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

如果您使用的是 Bootstrap 4.0 版，您几乎没有内置类来实现它，请在 sn-p 下方使用。

<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 版，请告诉我，我会为您提供另一个解决方案。