引导网格出错答案

【问题标题】：Bootstrap Grid going wrong引导网格出错
【发布时间】：2020-10-07 07:10:25
【问题描述】：

也许我是盲人，但我的 Bootstrap Grid 没有按预期运行。它不应该填满整行吗？ Image of possily wrong behavior

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

【问题讨论】：

标签： html bootstrap-4 grid bootstrap-5 bootstrap-grid

【解决方案1】：

你必须记住“行”类已经设置了默认属性：

margin-right: -15px;
margin-left: -15px;

并且“col-anything”类已经设置了默认属性：

padding-right: 15px;
padding-left: 15px;

这就是为什么你的想法没有像你预期的那样奏效。

【讨论】：

有没有更好的方法来达到这样的网格？我应该改用 Table 还是为每个选项卡设置 mx-0 和 px-0 标签？
根据我的经验，有时在小情况下更容易放置 mx-0 标签，但有时响应表是更清晰的选项，这取决于您的项目和您的喜好，我认为

【解决方案2】：

引导程序 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

【讨论】：