Bootstrap 3如何使一行中的列水平居中答案

【问题标题】：Bootstrap 3 how to make columns in a row horizontally centeredBootstrap 3如何使一行中的列水平居中
【发布时间】：2021-04-29 04:28:57
【问题描述】：

所以这是它的问题，我试图让列在行中水平居中，所以这里是小提琴：jsfiddle.net/y73f1bp0/

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

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

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

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

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

如果我还能尝试什么，任何帮助都将不胜感激，当使用 flex 时，它的效果非常好，按照我想要的方式，但是在调整大小时打破列的副作用对我来说当然是破坏交易。

其他内容：我也不能使用 bootstrap 3 偏移类，因为它们只适用于偶数列。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

你的第二个小提琴需要flex-wrap: wrap 告诉浏览器可以将列包装到下一行，这样它就不会尝试将列挤到同一行中。您拥有的 justify-content: center 将使行中的内容居中。

您的原始布局中有五行类似的内容。如果您不需要分离内容，您可以将所有内容放在一个 row 中并让 flex 处理布局——我在我的 sn-p 中包含了第二个版本。

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

我不知道为什么你的问题得到了一些反对票，但这可能是因为你把你的例子放在一个小提琴中然后链接到它，而不是使用 sn-p 工具。 sn-p 工具确实可以让您更轻松地理解您的问题，而无需访问其他网站。

我删除了你的一些行，所以这两个示例符合 sn-p 字符限制。

【讨论】：

非常感谢您的努力 :) 这确实解决了我的问题。是的，我的问题的问题是我可能没有在代码中提供足够好的示例，这些示例很容易重现，我认为代码会很长，因为我真的不知道是什么影响了我的布局无法正常工作，我无法快速确定最必要的部分。