Question

我正在使用Bootstrap 4！我有一排两列，如何将第二列居中（col-8）？

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

Answer 1

使用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>

Bootstrap 4：2列，仅居中一列

1 个答案: