Bootstrap label.col-md-3 div.col-md-3 奇怪地包裹答案

【问题标题】：Bootstrap label.col-md-3 div.col-md-3 wrapping strangelyBootstrap label.col-md-3 div.col-md-3 奇怪地包裹
【发布时间】：2017-09-13 19:06:44
【问题描述】：

尝试使用 .net MVC 和引导程序组织显示表单 - 但是，得到了一些奇怪的引导程序包装行为。

我有以下代码；

@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%。

如果元素是交替的标签/ div，任何人都可以提供任何关于为什么包装行为奇怪的见解吗？可能是引导程序的错误 - 考虑到他们自己的文档使用相同类型的标记 (e.g.)？

我想说：

将标记更改为有一个额外的 div 是我最好的方法吗？例如

<div class="col-md-3">
    <label>Person 1:</label>
</div>
<div class="col-md-3>Joe</div>

但事实证明 - 这也有奇怪的包装行为：here

【问题讨论】：

使用
分别包装每 4 列，或者在每 4 列之后使用
有点想避免有条件行（例如 if (i % 2 == 0)
if(i % 2 != 0)
。我想默认行为是，如果 col 超过 12，它应该换行 - 如果它只是 div（根本没有任何标签 - 包括嵌套），就是这种情况。Moreso 想找出标签为什么会扰乱这种行为。跨度>
bootply.com/UvAmO0hJ1k
您将详细了解为什么默认行为在此链接上不起作用stackoverflow.com/questions/25598728/…

【解决方案1】：

有多种方法可以解决这个问题

1. 将每 12 列分别包装在单行中。例子。

<div class="row">

    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">Joe</div>

    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">Fred</div>
</div>
<div class="row">
    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">Sally</div>

    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">etc</div>
</div>
<div class="row">
    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">Sally</div>

    <label class="col-md-3">Person 1</label>

  <div class="col-md-3">etc</div>
</div>

Example

使用 clearfix 类。每 12 列后添加 clearfix div。

Example

如果您确定不需要自动高度，则使用 CSS 将相似的高度应用于所有列。

Here you will get more details about this isssue.

【讨论】：

【解决方案2】：

原来这与标签的边距底部有关。

所以它本质上是在做this。

我可能只是添加一个 display: flex 到它上面 - 强制相等的高度。这将在 bootstrap 4 发布之前解决它 - 因为它将使用 display: flex 而不是 float 来构建。

编辑：我最终修复它：

@for (int i = 0; i < Model.People.Count(); i++)
{
    var person = Model.People[i];

    <div class="col-md-6">
         <div class="row">
            <label class="col-md-6 col-form-label">@Html.DisplayNameFor(modelItem => person.Name) @(i + 1)</label>
            <div class="col-md-6">
                @Html.DisplayFor(modelItem => person.Name, new { @class = "form-control" })
            </div>
         </div>
    </div>
}

这使得列（外部 col-md-6 和行 div）的所有标签 + 显示具有相同的高度（即标签的高度） - 因此下一列向左浮动没有任何悬垂。这意味着它现在可以正确包装。

【讨论】：