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

如何修改代码以使其反映上面的图像？

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>

Answer 2

由于您在标题中表示要依赖Bootstrap，因此似乎依靠Bootstrap 4s flex box实用程序类将为您提供一个非常简单的解决方案。

<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">
<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>

<div class="container-fluid">
  <div class="row justify-content-center align-items-center h-100">
    <div class="col-4">
      <div class="bg-dark text-center">
        
        <form action="#null" method="get" class="mb-0">
        <button type="submit" class="btn btn-lg btn-primary">A</button>
        </form>
        
      </div>
    </div>
    
    <div class="col-4">
      <div class="bg-dark text-center">
        
        <form action="#null" method="get" class="mb-0">
        <button type="submit" class="btn btn-lg btn-primary">B</button>
        </form>
        
      </div>
    </div>
    
  </div>
</div>

此示例中的主力类为justify-content-center和align-items-center。前者使子元素在水平方向上居中于容器的宽度（在本例中为页面宽度的100％）。后者的功能相同，但垂直轴相同。

h-100类强制row占据页面高度的100％。如果您想让此 only 占据页面的前35％之后的空间，则可能需要创建一个自定义类，该类实际上是：

.my-custom-class {
  margin-top: 35%;
}

并在那里使用它。

如果您希望按钮占据宽度的100％，请参考.btn-block类：Bootstrap 4.x Documentation: Button Sizes

如何使用HTML，CSS和Bootstrap集中两个框

2 个答案: