时间戳

首页 > 解决方案 > 标题超过数字位置

html - 标题超过数字位置

问题描述

我有 col-md-6 的标题和编号以及 col-md-6 的图像。我想稍微超过数字，数字应该留在列之外。

在此处输入图像描述

.five-steps-number {
  font-size: 170px;
  color: #FFF0C2;
  font-weight: 700;
}

.five-steps-title {
  font-size: 78px;
  color: #00666A;
  font-weight: 100;
}
<!-- Bootstrap-3.3.x -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Body -->
<div class="row">
  <div class="col-md-7">
    <h3><span class="five-steps-number">1</span><span class="five-steps-title">Heading Here</span></h3>
  </div>
  <div class="col-md-5">
    <img src="images/image-1.png" class="flt-rht">
  </div>
</div>

标签： htmlcsstwitter-bootstrap-3responsive-design

解决方案

为您的班级添加否定词： margin-leftfive-steps-title

.five-steps-title {
  margin-left: -0.6em;
}


.five-steps-number {
  font-size: 170px;
  color: #FFF0C2;
  font-weight: 700;
}

.five-steps-title {
  font-size: 78px;
  color: #00666A;
  font-weight: 100;
  margin-left: -0.6em;
}
<!-- Bootstrap-3.3.x -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Body -->
<div class="row">
  <div class="col-md-7">
    <h3><span class="five-steps-number">1</span><span class="five-steps-title">Heading Here</span></h3>
  </div>
  <div class="col-md-5">
    <img src="images/image-1.png" class="flt-rht">
  </div>
</div>

推荐阅读