时间戳

首页 > 解决方案 > 引导网格出错

html - 引导网格出错

问题描述

也许我是盲人，但我的 Bootstrap Grid 并没有按预期运行。它不应该填满整行吗？可能错误行为的图像

<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
  <div class="col-4 row bg-info" style="max-height: 60vh;">
    <div class="col-12 row" style="max-height: 15vh;">
      <div class="col-8 bg-danger row">
        <div class="col-5 text-right"><h5>0</h5>Heim</div>
        <div class="col-1 text-center"><h5>:</h5></div>
        <div class="col-5 text-left"><h5>0</h5>Gast</div>
        <div class="col-1"></div>
        <div class="col-12"><p class="text-sm-center">Spielstand</p></div>
      </div>
      <div class="col-4 bg-success row">
        <div class="col-6 text-right">0<br>Heim</div>
        <div class="col-6 text-center">0<br>Gast</div>
        <div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
      </div>
    </div>
  </div>
</div>

标签： htmlbootstrap-4gridbootstrap-5bootstrap-grid

解决方案

引导程序 5（2021 年更新）

Bootstrap 5 网格仍然使用 flexbox，因此嵌套网格行/列仍然以相同的方式工作......

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col-4">
        </div>
        <div class="col-4">
        </div>
        <div class="col-4">
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 4（原始答案）

不要在同一个 div 中同时使用 col 和 row。而是遵循 Bootstrap 网格规则...

“在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。”

    <div class="row py-0">
        <div class="col-4 bg-info" style="max-height: 60vh;">
            <div class="row" style="max-height: 15vh;">
                <div class="col-8 bg-danger">
                    <div class="row">
                        <div class="col-5 text-right">
                            <h5>0</h5>Heim
                        </div>
                        <div class="col-1 text-center">
                            <h5>:</h5>
                        </div>
                        <div class="col-5 text-left">
                            <h5>0</h5>Gast
                        </div>
                        <div class="col-1"></div>
                        <div class="col-12">
                            <p class="text-sm-center">Spielstand</p>
                        </div>
                    </div>
                </div>
                <div class="col-4 bg-success">
                    <div class="row">
                    <div class="col-6 text-right">0<br>Heim</div>
                    <div class="col-6 text-center">0<br>Gast</div>
                    <div class="col-12 text-left">
                        <p class="text-sm-center">Teamfouls</p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://codeply.com/p/mKFXWjc39k

推荐阅读