Bootstrap 在文本下方添加水平线，就像在图像中一样？

i2byvkas 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(5)|浏览(170)

这是我的代码，我需要添加一个水平边框，如图所示

<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>
</section>

twitter-bootstrap

来源：https://stackoverflow.com/questions/35036185/adding-horizontal-line-below-the-text-like-in-the-image

5条答案

按热度按时间

8dtrkrch1#

尝试

.about-border {
    display: block;
    width: 80px;
    height: 3px;
    background: #f1cd8f;
    margin: 20px auto;
}

/* Optional CSS to center align the heading text*/
.about h1, .about h2 {
   text-align: center;
}

小提琴：https://jsfiddle.net/9oapmz9b/

赞(0）回复(0）举报 2022-12-07

fgw7neuy2#

.about-border div是不必要的，您可以改为以:after虚拟元素为目的。例如：

.about:after { /* this is the border */
    content:"";
    display:block;
    width: 6em;
    max-width:70%;
    border-bottom: 0.3em solid #F3C577;
    margin: 2em auto 0;
}

完整示例：https://jsfiddle.net/6d6tvqb2/

赞(0）回复(0）举报 2022-12-07

h4cxqtbf3#

或者例如

.about .container h3 {border-bottom: 6px solid #000;}

赞(0）回复(0）举报 2022-12-07

wgx48brx4#

here is the sol:

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="app.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <section class="about">
    <div class="container">
      <h1 class="text-center">The Resturant</h1>
      <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
      <div class="col-xs-12"><hr></div>
    </div>
  </section>
</body>

</html>

赞(0）回复(0）举报 2022-12-07

zkure5ic5#

试试这个代码，hopw这个有用。

<style>
.container {
    text-align: center;
}
.about-border {
    width: 200px;
    height: 3px;
    background: #F3C577;
    margin: 20px auto;
}

</style>
<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>
</section>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 在文本下方添加水平线，就像在图像中一样？

5条答案

相关问题

热门标签

最新问答