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

ki0zmccv 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(270)

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/43463764/bootstrap-label-col-md-3-div-col-md-3-wrapping-strangely

2条答案

按热度按时间

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.

赞(0）回复(0）举报 2022-12-16

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的高度）--所以下一列没有任何突出部分可以向左浮动，这意味着它现在正确地换行了。

赞(0）回复(0）举报 2022-12-16

我来回答

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

2条答案

相关问题

热门标签

最新问答