使用bootstrap css创建带标题的水平标尺

Question

我正在尝试使用标题和标签创建HR。 它应该看起来像：

Codepan：CODEPEN DEMO

我对css并不擅长，如果有人能告诉我应该使用哪些引导程序组件，我感激不尽。或者改变css

HTML：

<h3> <span>Top pics </span> <span>Popular </span> <span> Friend analysis </span> </h3></t>
<hr>
<h6>Article changes everyday, come back for more</h6>

<h3> IT should  look like this
</h3>
<img src="http://i43.tinypic.com/33tgdn8.png">

Answer 1

我查看了你的截图，并使用Bootstrap 3和CSS创建了HTML。请查看 Demo 。

<强> HTML：

<div class="container">
    <div class="row">
    <div class="menu col-md-8">
      <ul>
        <li>Top picks<span>beta</span></li>
        <li>Popular<span>beta</span></li>
        <li>Friends analysis</li>
        <hr>
      </ul>
      <p class="custom-alert">Article changes everyday! come back for more fun......<p>
    </div>
    </div><!--./row-->
</div><!--./container -->

<强> CSS：

body {
  font-size: 130%;
  color: gray;
}
hr {
    margin-top: 1%;
}
.menu > ul {
  display: block;
  list-style: none;
}
.menu > ul > li {
  display: inline;
  padding-right: 10%;
}
.menu > ul > li:first-child {
  color: red;
}
.menu > ul > li:last-child {
  padding-right: 0;
}
.menu > ul > li > span {
  color: black;
  font-size: 80%;
  text-transform: uppercase;
  vertical-align: super;
  padding: 1%;
}
.custom-alert {
  padding-left: 7%;
  color: red;
}