如果连续少于 3 个，则将引导程序动态更改为居中答案

【问题标题】：Dynamically change bootstrap to centre if less than 3 in a row如果连续少于 3 个，则将引导程序动态更改为居中
【发布时间】：2016-09-03 04:05:09
【问题描述】：

目前我有三个col-md-4 列，每个列显示一个图像。如果用户只上传了 1 或 2 张图片，它将像正常一样浮动内容，但留下第三张浪费空间。

是否可以使用 CSS 将 1-2 列居中，直到添加第三列？

    <div class="container>

     <div class="row">

        <div class="col-md-4 image-1">
         <img>
        </div>

        <div class="col-md-4 image-2">
         <img>
        </div>

        <div class="col-md-4 image-3">
         <img>
        </div>

     </div>

    </div>

【问题讨论】：

标签： php html css wordpress twitter-bootstrap

【解决方案1】：

我认为您不应该将左对齐的项目（当 3 个或更多时）与居中对齐的项目混合使用。当一组 2 个项目跟随一组 4 或 5 个项目时会发生什么？

如果您希望它们全部居中，只需向容器添加一个自定义类（在我的情况下为 .centerRows）并使用下面的 CSS：

.centerRows>.row {
  text-align: center;
}
.centerRows>.row>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

如果您只想将具有 2 个或更少子级的行居中，请在通过 js 计算其子级后，将自定义类添加到要居中的行。概念证明：

$('.container>.row').each(function(){
  if($(this).children().size() < 3) $(this).addClass('centerMe');
})

.centerMe {
  text-align: center;
}
.centerMe>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

【讨论】：

好的，我知道你在这里做什么。我只想在少于 3 列时居中。也只会有一行，因为它最多只显示 3 个。我可以试试看能不能走js路线！
我添加了必要的jQuery，仅用于在第二个 sn-p 中将只有一个或两个孩子的 div 居中。但是，您应该调整选择器以匹配项目中的类。我建议对要应用此功能的行使用特定的类。
太棒了！我会试试看。谢谢。

【解决方案2】：

恕我直言，你不能用 css 做到这一点。可以办到使用 JS。像这样的：

if($('.image-3').length === 0){
    $('.row').find('div').RemoveClass('col-md-4');
    $('.row').find('div').AddClass('col-md-6');
}

但是，如果您要在算法中添加更多语句，我的意思是 “如果它只有一个 div，或者只有 4 个（下一行有一个）” 你必须得到更复杂的代码。

【讨论】：