Question

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

由于

.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

您需要使用引导类来解决此问题，将row col-sm-12添加到indicador

查看结果：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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课程。

希望它有所帮助。

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

2 个答案: