尝试使用.net MVC和bootstrap来组织一个显示表单-然而,得到了一些奇怪的bootstrap Package 行为。
我有下面的代码;
@for (int i = 0; i < Model.People.Count(); i++)
{
var person = Model.People[i];
<label class="col-md-3 col-form-label">@Html.DisplayNameFor(modelItem => person.Name) @(i + 1)</label>
<div class="col-md-3">
@Html.DisplayFor(modelItem => person.Name, new { @class = "form-control" })
</div>
}
我期待的是这样的布局
<table>
<tr>
<td>Person 1:</td>
<td>Joe</td>
<td>Person 2:</td>
<td>Fred</td>
</tr>
<tr>
<td>Person 3:</td>
<td>Sally</td>
<td>Person 4:</td>
<td>etc</td>
</tr>
但我真正得到的是这样的:
<table>
<tr>
<td>Person 1:</td>
<td>Joe</td>
<td>Person 2:</td>
<td>Fred</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>Person 3:</td>
</tr>
<tr>
<td>Sally</td>
<td>Person 4:</td>
<td>etc</td>
</tr>
</table>
Bootply for convenience
我的印象是,如果引导网格布局超过12,它就应该简单地换行。因此,4x col-md-6基本上会产生2行,这两行都有2列,占50%。
如果元素是一个交替的label / div,那么有谁能提供一些关于为什么 Package 行为会表现得很奇怪的见解吗?可能是 Bootstrap 的bug-考虑到他们自己的文档使用了相同类型的标记(例如)?
本来要说:
修改标记以增加一个div是我最好的方法吗?
<div class="col-md-3">
<label>Person 1:</label>
</div>
<div class="col-md-3>Joe</div>
但事实证明-这也有奇怪的 Package 行为:here
2条答案
按热度按时间9o685dep1#
有多种方法可以解决此问题
1.将每12列分别换行到单行中。例如。
Example
1.使用clearfix类,每隔12列添加clearfix div。
Example
1.使用CSS应用类似的高度到所有列,如果你确定不需要自动高度。
x一个一个一个一个x一个一个二个x
Here you will get more details about this isssue.
bvn4nwqk2#
原来是和标签的下边距有关。
所以它实际上是在做this。
我可能会添加一个显示器:弯曲到它上面-强制相等的高度。这将解决它,直到bootstrap 4被释放-因为它将随后使用display来构建:Flex而不是浮动的。
编辑:我最终用以下代码修复了它:
这使得所有的label + display for columns(外部col-md-6和row div)具有相同的高度(即label的高度)--所以下一列没有任何突出部分可以向左浮动,这意味着它现在正确地换行了。