Bootstrap 引导标签.col-md-3 div.col-md-3异常换行

ki0zmccv  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(269)

尝试使用.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

9o685dep

9o685dep1#

有多种方法可以解决此问题
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
1.使用clearfix类,每隔12列添加clearfix div。
Example
1.使用CSS应用类似的高度到所有列,如果你确定不需要自动高度。
x一个一个一个一个x一个一个二个x
Here you will get more details about this isssue.

bvn4nwqk

bvn4nwqk2#

原来是和标签的下边距有关。
所以它实际上是在做this
我可能会添加一个显示器:弯曲到它上面-强制相等的高度。这将解决它,直到bootstrap 4被释放-因为它将随后使用display来构建:Flex而不是浮动的。
编辑:我最终用以下代码修复了它:

@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>
}

这使得所有的label + display for columns(外部col-md-6和row div)具有相同的高度(即label的高度)--所以下一列没有任何突出部分可以向左浮动,这意味着它现在正确地换行了。

相关问题