html - 居中多个元素，当元素数量可能发生变化时

Question

所以在我正在进行的元素中，我有以下代码:

foreach (string answer in Model.Answers)
{
    <div class="col-sm-2 DANNYSNEWCLASS">
        <label class="PreviousAnswerLbl">
            @if (answer == Model.PreviousAnswer)
                {
                     <input type="radio" name="answer" value="@answer" checked="checked" /><span>@answer</span>
                }
                else
                {
                    <input type="radio" name="answer" value="@answer" /><span>@answer</span>
                }
        </label>
    </div>
}

这里的元素数量可以从 2 到 5 不等，所以我如何做一些 CSS/bootstrap 技巧来使单选按钮都居中，而目前它们似乎都漂浮在左边。所有这些都已经在 <div class="container"> 中了和 <div class="row"以及所有 Bootstrap 的东西。

我想要这样，例如，如果有 5 个标签，那么第 3 个 label 的中间位于整个div的中间，两侧各有2个标签等，以及只有2个标签时，屏幕左侧有一个，右侧有一个，最好不要有太大的差距.希望这是有道理的，让我知道是否需要更多说明。提前致谢

Answer 1

只需一点点计算就可以决定为每个 div 分配多少 col-sm-* 空间。所以这里有一个小技巧。首先获取数字来决定每个列的宽度

@{
   var colWidth = 12 / @Model.Answers.Count(); 
 }

因为 bootstrap 有 12 列布局。

然后在你的 for 循环中你可以这样做..

  foreach (string answer in Model.Answers)
  {
    <div class="col-sm-"+ @colWidth +" DANNYSNEWCLASS">
       .... 
       ....
    </div>
  }

注意:如果您的计数为 5，则 colWidth 将为 2。这意味着总共只会占用 10 列。这样可能会在右侧留出一些空间。为此，我们可以使用 col-sm-offset-1，它将在左侧提供 1 列的偏移量，现在我们将在右侧有 1 列。所以所有的 div 都将居中。

所以将它添加到您的First Div

<div class="col-sm-"+ @colWidth +" DANNYSNEWCLASS "+ @Model.Answers.Count() == 5 ? "col-sm-offset-1":"" +"">