Question

我正在将引导程序中的行中的两个按钮对齐。我将两个按钮放在两列中，并将此按钮放在一个大列中以使所有项目居中。它居中，但彼此堆叠。我希望按钮在行的中心并排对齐，如下图所示：Image showing desired output

这是我的代码：

public class PaginationWrapper<T> {

    private Class<T> clazz;
    private int currentPage;
    private int pageSize;

    public PaginationWrapper(Class<T> clazz) {
        this.clazz = clazz;
        this.currentPage = -1;
        this.pageSize = 100;
    }

    private static ArrayList<Contract> getPaginatedContracts(int startRow, int pageSize) {
        ArrayList<Contract> list = new ArrayList<>(pageSize);
        // Get info from database
        return list;
    }

    private static ArrayList<Job> getPaginatedJobs(int startRow, int pageSize) {
        ArrayList<Job> list = new ArrayList<>(pageSize);
        // Get info from database
        return list;
    }

    public ArrayList<T> getNextPage() {
        currentPage++;
        int startRow = currentPage * pageSize;
        if (clazz.isAssignableFrom(Contract.class)) {
            // Warning: java: unchecked cast
            // required: java.util.ArrayList<T>
            // found: java.util.ArrayList<Contract>
            return (ArrayList<T>) getPaginatedContracts(startRow, pageSize);
        } else if (clazz.isAssignableFrom(Job.class)) {
            // Warning: java: unchecked cast
            // required: java.util.ArrayList<T>
            // found: java.util.ArrayList<Job>
            return (ArrayList<T>) getPaginatedJobs(startRow, pageSize);
        }
        return null;
    }


    static class Contract {
    }

    static class Job {
    }

    public static void main(String[] args) {
        PaginationWrapper<Contract> contractWrapper = new PaginationWrapper<>(Contract.class);
        ArrayList<Contract> paginatedList = contractWrapper.getNextPage();
    }
}

.con
{
    margin: 0;
    padding: 0;
}

我在stackoverflow中搜索了可能的答案，但是在搜索中却没有找到答案。如果您已经知道答案了，请直接告诉我。

Answer 1

要获得预期结果，请使用以下选项

在行div类别中，使用4列，中间两列使用带有按钮的div，即类别- col-sm-3
使用class-col-lg-4 mx-auto删除div，以将div div置于行class div的中央

.con
{
    margin: 0;
    padding: 0;
}

<!DOCTYPE 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-sm-3 mx-auto"></div>
        <div class="col-sm-3 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>
</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>

codepen-https://codepen.io/nagasai/pen/ZwwzrO

Answer 2

我将使用.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

如何在引导程序行中将两列带有按钮的居中对齐？

2 个答案: