• • 此问题在此处已有答案**：

CSS technique for a horizontal line with words in the middle（34个答案）
十小时前关门了。

下面是我用过的HTML和CSS，它们没有响应。我想知道如何使输出响应。有没有一种方法可以用 Bootstrap 做同样的事情？

.red-hori-line-2 {
  border: 1px solid red;
  width: 75px;
  padding-top: -32px;
  margin-top: -32px;
  padding-left: 320px;
  margin-left: 320px;
}

.red-hori-line-3 {
  border: 1px solid red;
  width: 75px;
  padding-top: -10px;
  margin-top: -10px;
  padding-right: 320px;
  margin-right: 320px;
}

.red-vert-line-1 {
  border-left: 2px solid red;
  height: 60px;
  padding-top: -10px;
  margin-top: -10px;
  padding-left: 320px;
  margin-left: 320px;
}

.red-vert-line-2 {
  border-left: 2px solid red;
  height: 60px;
  padding-top: -60px;
  margin-top: -60px;
  padding-left: 1246px;
  margin-left: 1246px;
}

<div>
  <center>
    <p class="in-focus">IN FOCUS</p>
  </center>
</div>
<hr class="red-hori-line-2" />
<hr class="red-hori-line-3" />
<div class="red-vert-line-1"></div>
<div class="red-vert-line-2"></div>