代码之家 › 专栏 › 技术社区 › Tzimpo

Boostrap 4:2列,仅居中一列

bootstrap-4 css

0

Tzimpo · 技术社区 · 6 年前

<div class="row main-nav">
    <div class="col-1">
        <a (click)="returnPreviousPage()" class="main-nav-button">
            <span><i class="fa fa-chevron-left"></i></span>
        </a>
    </div>
    <div class="col-8 text-center">
        <div class="main-nav-logo">
            <h3 class="header-main">Some Title Here</h3>
        </div>
    </div>
</div>

1 回复 | 直到 6 年前

1

2

Znaneswar 6 年前

使用 mx-auto 水平定心等级

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row main-nav">
<div class="col-1">
    <a (click)="returnPreviousPage()" class="main-nav-button">
        <span><i class="fa fa-chevron-left"></i>Hi</span>
    </a>
</div>
<div class="col-8 text-center mx-auto">
    <div class="main-nav-logo">
        <h3 class="header-main">Some Title Here</h3>
    </div>
</div>
</div>

</body>
</html>