Question

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>

我想将<a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>放在<div class="col">的底部，并水平居中放置，该怎么办？谢谢！

Answer 1

最简单的方法是使用flexbox布局。以下内容未经测试，但根据bootstrap docs应该可以为您提供所需的内容。

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

Answer 2

为了使按钮位于表单的底部，您应该添加一个新行（带有类行的新div），并使其水平居中，您应该添加以下类之一：pagination-centered或this answer建议的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>

Answer 3

尝试一下。可能需要进行一些编辑才能使其完全符合您的喜好，但应将警告按钮放在其他按钮的下方和中间。这里的关键是引导程序类“ offset-（列数）”

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

如何水平居中并将元素放在列中

3 个答案: