所以在我正在进行的元素中,我有以下代码:
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个标签时,屏幕左侧有一个,右侧有一个,最好不要有太大的差距.希望这是有道理的,让我知道是否需要更多说明。提前致谢
最佳答案
只需一点点计算就可以决定为每个 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":"" +"">
关于html - 居中多个元素,当元素数量可能发生变化时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36427886/