bootstrap：为什么 div child 比 div parent 大？答案

【问题标题】：bootstrap: Why div child is bigger than div parent?bootstrap：为什么 div child 比 div parent 大？
【发布时间】：2017-12-04 13:40:03
【问题描述】：

我提取了我的网络的一部分来显示我的问题。为什么黄色 div 比他父母的黑色 div 大？它怎么能完全适合父母？我是新手，所以我想我做错了什么

谢谢

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>

【问题讨论】：

不是更大； indicador 正在扩展以包含 indicadormedio，就像它应该的那样。
它不是更大.. 都具有相同的宽度
bootstrap grid 规则 1：Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Ron van der Heijden ，我不明白你的意思，我在开头有“
”这就是你的意思？

标签： html css twitter-bootstrap

【解决方案1】：

你需要使用引导类来解决这个问题，将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>

【讨论】：

我不明白为什么，但它解决了问题。谢谢
@wakeup bootstrap 有自己预定义的类和样式，所以你需要正确使用它们:) .. 如果答案对你有帮助别忘了接受它

【解决方案2】：

你有太多的级联 div，我看不出有什么明显的用途。我清理了它们，它给了the following result。

以下代码结束：

<div class="container" >
   <div class="row indicador"  style=" display: table; " >                              
      <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">subtitle</div>
      </div>
   </div>
</div>

我还将您转至 following post 以了解何时使用 row 类。

希望对你有帮助。

【讨论】：