Bootstrap3 如何让一行中的列水平居中

Question

这就是问题所在，我试图让列在行中水平居中，所以这里是 fiddle：jsfiddle.net/y73f1bp0/

在那里你会看到几行，每行最多有4列。在大中型屏幕上 - 4 列在小屏幕上 - 2 列在超小屏幕上 - 1 列

所以如果你调整它的大小一切正常，但这里我有一个案例，向下滚动到最底部看到最后一行，它包含 3 列，所以我只想展示一个可以有的案例这种情况下只有一行可以有一列、两列、三列或四列。

问题。问题是，当我连续少于 4 列时，它们不会放在行的中心，而是从左到右，这不是我想要的，我需要将它们准确地放置在行的中心，无论它只是一列、两列还是三列。

我试过使用 display: flex;带有 align-items 和 justify-content 属性的东西，看起来它完成了工作，但是当调整这些列的大小时我得到奇怪的副作用没有正确排列并且列高度不完全相同，所以我猜'flex' 的工作方式与常规 div 完全不同，不应与 bootstrap 3 responsive 类一起使用。您可以在此处查看调整大小时的副作用：http://jsfiddle.net/ub35xgrk/ 我刚刚为每一行应用了 display: flex 和内容对齐到中心。

要求。要求是我不能使用 Bootstrap 3 以上的任何东西，但是我当然可以使用一些额外的 CSS 类来帮助我，因为我正在更改几年前的 WordPress 主题，这对我来说很好地完成了工作，但我需要调整一些部分，所以我不能简单地切换到其他 CSS 框架或 Bootstrap 版本那么容易。

对于我还可以尝试的任何帮助，我将不胜感激，当使用 flex 时，它工作得非常好，是我想要的方式，但是在调整大小时破坏列的副作用对我来说当然是破坏交易的因素.

其他内容：我也不能使用 bootstrap 3 偏移量类，因为它们只对偶数列最有效。

Answer 1

你的第二个 fiddle 需要的是 flex-wrap: wrap 告诉浏览器可以将列换行到下一行，这样它就不会试图将列压缩到同一行排。您拥有的 justify-content: center 会使行中的内容居中。

您的原始布局中有五行相似的内容。如果您不需要将内容分开，您可以将所有内容放在一个 row 中，让 flex 处理布局——我在我的代码片段中包含了第二个版本。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<style>
   .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }

   .product_heading {
      min-height: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .product_cat_col {
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 40px;
      padding-bottom: 40px;
      text-align: center;
   }

   .product_cat_img {
      width: 34.5rem;
      max-width: 100%;
      height: auto;
   }

   @media (min-width: 768px) {
      .product_cat_img {
            width: auto;
      }
   }
</style>

<h2 style="margin: 10rem 0 5rem">Original configuration &ndash; with three rows</h2>
<div class="container">
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Nat snack</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-nat-snack/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div>&nbsp;</div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Kropsrensning</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-kropsrensning/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Stærk Immunitet</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-staerk-immunitet/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">fiberblanding Med tranebær</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/blandinger-af-kostfibre/asun-fiberblanding-med-tranebaer/">LÆS MERE</a>
            </div>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">inhalator vitamin B12</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>89,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/inhalatorer/asun-inhalator-vitamin-b12/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">inhalator Vitamin B12 (jordbær)</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>89,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/inhalatorer/asun-inhalator-vitamin-b12-jordbaer/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">transdermal vitaminplaster Vitamin B12</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitamin-plastre/asun-transdermal-vitaminplaster-vitamin-b12/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">transdermal vitaminplaster Vitamin D3</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitamin-plastre/asun-transdermal-vitaminplaster-vitamin-d3/">LÆS MERE</a>
            </div>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">vingummi vitaminer Til øjne</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>129,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitaminer-vingummier/asun-vingummi-vitaminer-til-oejne/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Vingummi vitaminer Hår, negle, hud</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>149,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitaminer-vingummier/asun-vingummi-vitaminer-haar-negle-hud/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">vingummibamser Omega-3 og multivitaminer</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>99,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitaminer-vingummier/asun-vingummibamser-omega-3-og-multivitaminer/">LÆS MERE</a>
            </div>
      </div>
   </div>
</div>
<h2 style="margin: 10rem 0 5rem">Alternate method using all columns in one row</h2>
<div class="container">
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Nat snack</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-nat-snack/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div>&nbsp;</div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Kropsrensning</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-kropsrensning/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Stærk Immunitet</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>169,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/urteblandinger/asun-staerk-immunitet/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">fiberblanding Med tranebær</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/blandinger-af-kostfibre/asun-fiberblanding-med-tranebaer/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">fiberblanding Med sorbitol</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/blandinger-af-kostfibre/asun-fiberblanding-med-sorbitol/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">fiberblanding Original</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>189,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/blandinger-af-kostfibre/asun-fiberblanding-original/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">inhalator Diet</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>89,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/inhalatorer/asun-inhalator-diet/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">inhalator Energy + B12</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>109,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/inhalatorer/asun-inhalator-energy-b12/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">inhalator Relax</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>89,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/inhalatorer/asun-inhalator-relax/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">Vingummi vitaminer Hår, negle, hud</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>149,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitaminer-vingummier/asun-vingummi-vitaminer-haar-negle-hud/">LÆS MERE</a>
            </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 product_cat_col">
            <div><label class="label label-danger">Udsolgt</label></div>
            <hr>
            <img class="product_cat_img" src="https://images-na.ssl-images-amazon.com/images/I/61UbWeyxudL._SL1113_.jpg">
            <hr>
            <div class="text-center product_heading">
               <h3 class="lora-font" style="font-size: 1.5em;">vingummibamser Omega-3 og multivitaminer</h3>
            </div>
            <hr>
            <div>
               <div class="product-price price "><span class="woocommerce-Price-amount amount"><bdi>99,00&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></bdi></span></div>
            </div>
            <hr>
            <div>
               <a class="shop-button bg-white" href="https://asun.dk/vitaminer-vingummier/asun-vingummibamser-omega-3-og-multivitaminer/">LÆS MERE</a>
            </div>
      </div>
   </div>
</div>

我不确定为什么你的问题得到了一些反对票，但这可能是因为你把你的例子放在 fiddle 中然后链接到它，而不是使用代码片段工具。代码段工具确实可以让您更轻松地理解您的问题，而无需访问其他网站。

我删除了你的一些行，所以他们两个例子将符合摘要字符限制。

Bootstrap3 如何让一行中的列水平居中

Bootstrap 3 how to make columns in a row horizontally centered

html

css

twitter-bootstrap-3