我覺得這是一個相對簡單的造型,但我一生都無法弄清楚如何去做。
我的代碼:
<div class="container py-5">
<div class="pull-left" style="margin-right:5px">
<form method="post">
{% csrf_token %}
<p>
<h3>
Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
</h3>
</p>
<button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
</form>
</div>
<a href="{% url 'entry-detail' entry.id %}">
<button class="btn btn-secondary">Cancel</button>
</a>
</div>
我希望“確認”和“取消”按鈕彼此相鄰對齊,但是如果我將“取消”放在“確認”按鈕旁邊或放在表單內的 div 中,它也會執行洗掉操作。
在 Django 中使用 Bootstrap。
uj5u.com熱心網友回復:
您最簡單的解決方案是將取消按鈕也放在表單中,因為您的表單是塊級元素,除非您將其更改為行內級元素,否則它不會讓您將其放在旁邊。或者使父容器成為 flexblox 或網格容器。
解決方案:
.button--container {
display: flex;
justify-content: space-between
}
<div class="container py-5">
<div class="pull-left" style="margin-right:5px">
<form method="post">
{% csrf_token %}
<p>
<h3>
Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
</h3>
</p>
<div class="button--container">
<button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
<a class="btn btn-secondary" href="{% url 'entry-detail' entry.id %}">Cancel</a>
</div>
</form>
</div>
</div>
您還會注意到我已將您的標記從 更改<a><button /></a>為<a></a>。這是因為您不能在按鈕內放置錨標記或在錨內放置按鈕。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/333949.html
