html - Bootstrap : Why div child is bigger than div parent?

Question

我已经提取了我网站的一部分来展示我的问题。为什么黄色的 div 比他父级的黑色 div 大？它如何才能完全适合 parent ？我是 bootstrap 的新手，所以我想我做错了什么

谢谢

Example

.indicador {
  background-color: black;
  color: white;
  border-radius: 5px;
}

.indicadormedio {
  background-color: yellow;
  color: #01CB99;
  font-size: 40px;
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row " style=" display: table; ">

    <div class="col-sm-12 ">
      <div class="row">
        <div class="col-sm-12">
          <div class="row" style="background-color:red">
            <div class="col-sm-12 ">
              <div class="indicador">
                <div class="row">
                  <div class="col-sm-12">title </div>
                </div>
                <div class="row indicadormedio">
                  <div class="col-sm-12">30</div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="row">
                      <div class="col-sm-12">subtitle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>

</div>

Answer 1

你需要使用 Bootstrap 类来解决这个问题，将 row col-sm-12 添加到 indicador

查看结果:

.indicador {
  background-color: black;
  color: white;
  border-radius: 5px;
}

.indicadormedio {
  background-color: yellow;
  color: #01CB99;
  font-size: 40px;
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row " style=" display: table; ">

    <div class="col-sm-12 ">
      <div class="row">
        <div class="col-sm-12">
          <div class="row" style="background-color:red">
            <div class="col-sm-12 ">
              <div class="indicador row col-sm-12">
                <div class="row">
                  <div class="col-sm-12">title </div>
                </div>
                <div class="row indicadormedio">
                  <div class="col-sm-12">30</div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="row">
                      <div class="col-sm-12">subtitle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>

</div>