问引导4: 2列，只对一列
EN

Stack Overflow用户

提问于 2019-11-20 08:33:09

回答 1查看 51关注 0票数 0

我用的是自带4！我有一行，有2列，如何使第二列(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>

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-20 08:39:31

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58949875

复制

相似问题

问引导4: 2列，只对一列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4: 2列，只对一列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4: 2列，只对一列
EN