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"以及所有引导程序中。

我希望如此，例如，如果有5个标签，那么第3个label的中间位于整个div的中间，两边都有2个标签等，以及何时只有2个标签，屏幕左侧有一个标签，右侧有一个，最好没有太大的间隙。希望这是有道理的，请告诉我是否需要进一步澄清。提前致谢

Answer 1

只需要进行一些计算，即可确定每个col-sm-*分配多少div个空间。所以这是一个小技巧。首先得到数字来决定每个col宽度

@{
   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":"" +"">

Answer 2

只是不要使用Bootstrap网格类。标签和输入是内联元素，因此您可以像任何文本一样将它们居中。只需在所有标签周围应用包装器div并应用text-center Bootstrap类。

<div class="text-center">
    foreach (string answer in Model.Answers)
    {
        <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 个答案: