航向号码位置

Question

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

Answer 1

在你的 five-steps-title class 中添加一个 negative margin-left:

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

航向号码位置

Heading over number position

html

css

twitter-bootstrap-3

responsive-design