时间戳

首页 > 解决方案 > 如何在一行引导程序中将两列与按钮居中？

html - 如何在一行引导程序中将两列与按钮居中？

问题描述

我正在努力在引导程序中对齐一行中心的两个按钮。我已将两个按钮放在两列中，并将此列放在一个大列中以使所有项目居中。它居中，但彼此堆叠。我希望按钮在行的中心并排对齐，如下图所示：显示所需输出的图像

这是我的代码：

.con
{
    margin: 0;
    padding: 0;
}
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container-fluid con">
    <div class="row">
        <div class="col-lg-4 mx-auto">
            <div class="col-sm-6 mx-auto">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Sign Up
                </button>
            </div>
            <div class="col-sm-6 mx-auto">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Log in
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>

我在 stackoverflow 中搜索了可能的答案，但在我的搜索中没有找到答案。如果答案已经回答并且您知道，请指导我。

标签： htmlcssbootstrap-4

解决方案

我会使用 .off-set 类来设置 div 的边距，然后使用 text-center 类将 div 元素内的按钮居中。您也可以使用 cols 的宽度，但我相信您明白了。

    <!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 offset-4 text-center">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Sign Up
          </button>
        </div>
        <div class="col-2 text-center">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Log in
          </button>
        </div>
      </div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>

笔：https ://codepen.io/anon/pen/YBBKQL

推荐阅读