html - 如何使用 HTML、CSS 和 Bootstrap 将两个盒子集中起来

Question

如何将两个按钮/可点击框集中起来，使它们看起来像下图:

这是我到目前为止所做的:

CSS文件

.container_1 .panel_1 {
    position: absolute;
    top: 35%;
    left: 45%;
    transform: translateX(-50%) translateY(-50%);
}

.container_2 .panel_2 {
    position: absolute;
    top: 35%;
    left: 55%;
    transform: translateX(-50%) translateY(-50%);
}

HTML文件

{% block content %}



    <div class="container_1">
        <div class="panel_1">
            <form class="form-horizontal" action="{% url 'left' %}" method="get">
                <input type="submit" value="left" class="btn btn-lg btn-primary">
            </form>

        </div>
    </div>

    <div class="container_2">
        <div class="panel_2">
            <form class="form-horizontal" action="{% url 'right' %}" method="get">
                <input type="submit" value="right" class="btn btn-lg btn-primary">
            </form>
        </div>
    </div>


{% endblock %}

如何修改代码以使其反射(reflect)上图？

Answer 1

也许这对您有用？添加了一些自定义容器来保存我编写的样式以避免覆盖 Bootstrap 类上的任何内容，不应修改

.main-container {
  height: 100vh;
}

.container_1,
.container_2 {
  min-height: 100%;
}

.full-btn {
  height: 50vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="main-container">
    <div class="row h-100 justify-content-around align-items-center">
      <div class="col-3 h-50">
        <div class="container_1">
          <div class="panel_1">
            <form class="form-horizontal" action="{% url 'left' %}" method="get">
              <input type="submit" value="left" class="btn btn-lg btn-primary btn-block full-btn">
            </form>

          </div>
        </div>
      </div>
      <div class="col-3 h-50">
        <div class="container_2">
          <div class="panel_2">
            <form class="form-horizontal" action="{% url 'right' %}" method="get">
              <input type="submit" value="right" class="btn btn-lg btn-primary btn-block full-btn">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>