CSSBootstrap將按鈕放在右下角

我需要幫助在 Bootstrap 的右下角放置一個按鈕col。我想把按鈕放在下圖中黑色輪廓的位置。

<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">     
  <div class="container">
   <div class="row">
     <div class="col-sm bg-info">
        <div>
        </div>
     </div>
    <div class="col-sm">
       <h3> Username</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
       <p>xxx Followers . xxx Following</p>
    </div>
    <div class="col-sm bg-danger">
      <p class="ml-auto">
        <button type="button" class="btn btn-primary">Cancel</button>
      </p>
    </div>
           
        
    </div>
   </div>

</div>

uj5u.com熱心網友回復：

看一下這個 -

<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">     
<div class="container">
 <div class="row">
 <div class="col-sm bg-info">
    <div>
    </div>
 </div>
<div class="col-sm">
   <h3> Username</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
   <p>xxx Followers . xxx Following</p>
</div>
<div class="col-sm bg-danger">
  <p style="height: 100%" class="d-flex justify-content-end align-items-end">
    <button type="button" class="btn btn-primary">Cancel</button>
  </p>
</div>  
</div>

uj5u.com熱心網友回復：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="bg-secondary rounded">
    <div class="container bg-secondary">
      <div class="row align-items-stretch">
        <div class="col-12 col-sm bg-info"></div>
        <div class="col-12 col-sm">
          <div class="py-3">
            <h3> Username</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
            <p>xxx Followers . xxx Following</p>
          </div>
        </div>
        <div class="col-12 col-sm bg-danger">
          <div class="h-100 d-flex align-items-end justify-content-end py-3">
            <button type="button" class="btn btn-primary">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

有兩種方法可以實作這個...

第一種方法：

<div class="container-fluid">
  <div class="bg-secondary rounded">
    <div class="container bg-secondary">
      <div class="row align-items-stretch">
        <div class="col-12 col-sm bg-info"></div>
        <div class="col-12 col-sm">
          <div class="py-3">
            <h3> Username</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
            <p>xxx Followers . xxx Following</p>
          </div>
        </div>
        <div class="col-12 col-sm bg-danger">
          <div class="h-100 d-flex align-items-end justify-content-end py-3">
            <button type="button" class="btn btn-primary">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

這是最簡單的一個。

第二種方法：

1. 轉到index.css或App.css如果您已將其匯入檔案，則可以轉到任何其他 CSS 檔案。

撰寫這段代碼：

.col-sm {
    height: 100%; !important
    display: flex; !important
    justify-content: flex-end; !important
    align-items: flex-end; !important
}

你也可以給一個類，然后根據這個類撰寫 CSS 代碼。

標籤：html css 推特引导 引导程序 4

上一篇：React和Bootstrap最佳實踐（我應該如何設計我的網站）

下一篇：根據當前日期在2個日期時間欄位之間選擇日期