引導位置按鈕右

這是我的源代碼：

<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p>
<br />

<div class="border  text-center">
<p class="h5 text-center">Durch Ihre Entnahme f?llt der Lagerbestand unter die vom Administrator festgelegte Mindestmenge! </p>
<br>
<p class="h5">Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie das indem Sie auf den Nachfolgenden Button drücken </p>
</div>

<br />
<button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
<a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>

這是一張我想要我的按鈕的照片。我真的無法把它放在那里:(你能幫忙嗎？

uj5u.com熱心網友回復：

使用帶有空格的Bootstrap 的 Flex類：

• d-flex-->display: flex
• justify-content-between-->justify-content: space-between

<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
  <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p>
<br />

<div class="border  text-center">
<p class="h5 text-center">Durch Ihre Entnahme f?llt der Lagerbestand unter die vom Administrator festgelegte Mindestmenge! </p>
<br>
<p class="h5">Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie das indem Sie auf den Nachfolgenden Button drücken </p>
</div>

<br />

<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">Informieren</button>
  <a asp-controller="Inventar" asp-action="EntnahmeSuccess" id="weiter" class="btn btn-primary btn-lg">Weiter</a>
</div>

uj5u.com熱心網友回復：

使用引導類d-flex justify-content-between來應用樣式display: flex; justify-content: space-between;

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<p class="h1 p-3 mb-2 bg-danger text-white text-danger">
  Lagerbestand unter Mindestmenge!
</p>
<br />

<div class="border text-center">
  <p class="h5 text-center">
    Durch Ihre Entnahme f?llt der Lagerbestand unter die vom Administrator
    festgelegte Mindestmenge!
  </p>
  <br />
  <p class="h5">
    Sie sind dazu angehalten das Order-Managment zu Informieren! Mach Sie
    das indem Sie auf den Nachfolgenden Button drücken
  </p>
</div>

<br />
<div class="d-flex justify-content-between">
  <button class="btn btn-warning btn-lg" onclick="sendMail()">
    Informieren
  </button>
  <a
    asp-controller="Inventar"
    asp-action="EntnahmeSuccess"
    id="weiter"
    class="btn btn-primary btn-lg"
    >Weiter</a
  >
</div>

uj5u.com熱心網友回復：

您可以使用display: flex（您可以使用%或em）為您的容器

并設定justify-content: space-between;

<div style="display:flex; width: 20em; justify-content: space-between;">
<button>Informieren</button>
<button>Weiter</button>
</div>

標籤：html css 推特引导

上一篇：有意思的水平橫向溢位滾動

下一篇：使用jQuery和引導程式計算輸入欄位上的按鍵事件不起作用