CSS Bootstrap Column走到了外面?

时间:2017-10-25 20:03:36

标签: css twitter-bootstrap

      <div class="row">

        <div class="col-md-4">
          <div class="ticket_statistic_box">
            <div class="row">
              <div class="col-sm-5 iconarea">
                <span class="   fa fa-briefcase ticket-icon"></span>
              </div>
              <div class="col-sm-6">
                <div class="ticket_statistic_box_information">
                  <span>Total</span>
                  <span>0</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

我已将.iconarea的背景设置为白色,这是行中故障单统计框的左侧部分,结果如下:

img

看左边的那个,看看右边的那个,它应该只填充.ticket_statistic_box的背景部分,但是它出去了吗?

.ticket_statistic_box {
  height: 100px;
  background-color: rgba(0, 0, 0, 0.3);
  display: block;
  margin-top: 10px;
  text-align: center;
}

.ticket_statistic_box span.ticket-icon {
  line-height: 110px;
}

.ticket_statistic_box_information span {
  display: block;
  padding: 0;
}

.ticket_statistic_box_information span:first-child {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-top: 15px;
}

.ticket_statistic_box_information span:last-child {
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  color: #eda248;
}

.ticket-icon {
  color: #eda248;
  font-weight: lighter;
  font-size: 50pt;
}

.iconarea {
  background-color: white;
}

我在这里做过一些令人讨厌的错误吗?

2 个答案:

答案 0 :(得分:1)

可能是其中之一,因为这可能比其父div更高。

.ticket_statistic_box span.ticket-icon {
  line-height: 110px;
}

.ticket-icon {
  font-size: 50pt;
}

答案 1 :(得分:0)

.ticket-icon的字体较大,使其大于其所在的.iconarea框。它迫使盒子变大。因此,如果你使字体变小,它应该修复它。或者不是字体大小,更改行高。你的行高很大。