标题超过数字位置答案

【问题标题】：Heading over number position标题超过数字位置
【发布时间】：2022-01-25 04:25:39
【问题描述】：

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

【问题讨论】：

您使用的是 Bootstrap 等框架吗？如果是这样，请用正确的标签（框架和版本）标记您的问题
谢谢回复，我用的是Bootstrap v3.3.6版本

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

将否定 margin-left 添加到您的five-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>

【讨论】：