好的，所以我是 Bootstrap 的新手，我一直在嘗試將一個按鈕元素放在卡片的底部，即使正文很小。但是，我總是收到這個結果，這并沒有將我的按鈕放在我需要的右下角。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row justify-content-between">
<a href="#" class="col-2 btn btn-primary">Portfolio</a>
<div class="col-10">
<img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
由于您已經將元素嵌套在 a 中bootstrap row，因此您可以添加與我justify-content-end同義的類，justify-content: flex-end;我還在您的a tagat上宣告了寬度w-25。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row justify-content-end">
<a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
</div>
</div>
</div>
</div>
</div>編輯? “如果我在該行中有兩個元素，我想把一個放在右邊/開始，另一個放在左邊/結束？”
然后使用justify-content-between. 見下文。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row justify-content-between">
<a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
<a href="#" class="col-2 btn btn-primary w-25">Portfolio</a>
</div>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
這對你來說可以嗎？
.card-container {
display: flex;
}
.card {
flex: 1;
}
.card-body {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container mt-4">
<div class="row">
<div class="col-sm-6 card-container">
<div class="card">
<div class="card-body">
<a href="#">
<img src="https://picsum.photos/50/50/?gravity=west" class="img-responsive" />
</a>
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h6>
<p class="card-text pb-3 mb-0">This is a wider card with supporting text below as a natural</p>
<div class="mt-auto d-flex justify-content-end">
<a href="#" class="btn btn-primary">Portfolio</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 card-container">
<div class="card">
<div class="card-body">
<a href="#">
<img src="https://picsum.photos/50/50/?gravity=west" class="img-responsive" />
</a>
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h6>
<p class="card-text pb-3 mb-0">This is a wider card with supporting text below as a natural lead-in to additional content. This content</p>
<div class="mt-auto d-flex justify-content-end">
<a href="#" class="btn btn-primary">Portfolio</a>
</div>
</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410091.html
標籤：
上一篇：XPath分離組的鍵和值