HTML文件:
<div class="container h-100">
<div class="row h-100">
<div class="col">
<h1>{{ auction.name }}</h1>
</div>
<div class="col">
<form method="POST" action="{% url 'bid' auction.id %}">
{% csrf_token %}
<input name="bid" type="number" required><br>
<input type="submit" value="Make a bid!">
</form>
<a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
</div>
</div>
</div>
我想把>关闭拍卖放在
最简单的方法是使用flexbox布局。 以下内容没有经过测试，但根据引导程序，文档应该会给出您想要的内容。
<div class="col d-flex flex-column justify-content-between align-items-center">
<form method="POST" action="{% url 'bid' auction.id %}">
{% csrf_token %}
<input name="bid" type="number" required><br>
<input type="submit" value="Make a bid!">
</form>
<a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
</div>
为了使按钮位于表单的底部，您应该添加一个新行（带有类行的新div），并且为了使它水平居中，您应该添加以下类之一:Pagination-Center或Text-Center，如此答案所建议的。 最后的代码可能与此类似:
<div class="container h-100">
<div class="row h-100">
<div class="col">
<h1>{{ auction.name }}</h1>
</div>
<div class="col">
<form method="POST" action="{% url 'bid' auction.id %}">
{% csrf_token %}
<input name="bid" type="number" required><br>
<input type="submit" value="Make a bid!">
</form>
<div class="row pagination-centered">
<a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
</div>
</div>
</div>
</div>
试试这个。 这可能需要一些编辑来得到它确切地如何你喜欢它，但它应该把警告按钮下面的其他按钮和在中心。 这里的关键是引导类“offset-（number of collumns）”
<div class="container h-100">
<div class="row h-100">
<div class="col">
<h1>{{ auction.name }}</h1>
</div>
</div>
<div class="row">
<form method="POST" action="{% url 'bid' auction.id %}">
<div class="col-3">
{% csrf_token %}
</div>
<div class="col-3">
<input name="bid" type="number" required><br>
</div>
</div>
<div class="offset-5">
<input type="submit" value="Make a bid!">
</div>
</form>
</div>
<div class="row">
<div class="offset-5 col-1">
<a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
</div>
</div>
</div>
