引导网格出错

问题描述

也许我是盲人，但是我的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>

解决方法

您必须记住，“行”类已设置默认属性：

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

“ col-anything”类设置了默认属性：

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

这就是为什么您的想法无法按预期进行的原因。

,

请勿在同一div中同时使用col和row。而是遵循Bootsrap网格规则...

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

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

docs