英文:
Position the edit & delete button on the right of card
问题
我想将编辑和删除按钮放在与图像和场所名称相同的行上。编辑和删除按钮应该在右边，并且大小应该与卡片的大小相同。现在看起来像这样：
应该看起来像这样：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.card-content {
display: flex;
align-items: center;
position: relative;
}
<!-- language: lang-html -->
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<div class="px-md-5 px-4">
<a class="anchor-fake" onclick="MovingIn()">
<div class="block block--light block--cardShadow mb-md-4 mb-2">
<div class="card-content">
<div class="mr-3">
<img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
</div>
<div class="card-text-20-14-400">
@premise.PremiseNickname
</div>
<div class="btn-group ml-auto"> <!-- 添加 ml-auto -->
<input class="btn btn-secondary btn-lg" type="button" value="Edit">
<input class="btn btn-danger btn-lg" type="button" value="Delete">
</div>
</div>
</div>
</a>
</div>
<!-- end snippet -->
英文:
I want to place the edit & delete buttons on the same line as the image & premise name. The edit & delete buttons should be on the right & size should be the same size as the card. It now looks like this:
It should look like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.card-content {
display: flex;
align-items: center;
position: relative;
}
<!-- language: lang-html -->
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<div class="px-md-5 px-4">
<a class="anchor-fake" onclick="MovingIn()">
<div class="block block--light block--cardShadow mb-md-4 mb-2">
<div class="card-content">
<div class="mr-3">
<img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
</div>
<div class="card-text-20-14-400">
@premise.PremiseNickname
</div>
</div>
<div class="btn-group">
<input class="btn btn-secondary btn-lg" type="button" value="Edit">
<input class="btn btn-danger btn-lg" type="button" value="Delete">
</div>
</div>
</a>
</div>
<!-- end snippet -->
答案1
得分: 1
您只需将d-flex类添加到右侧容器即可。包裹按钮容器和其余内容的容器：
<div class="d-flex gap-3 block--light block--cardShadow mb-md-4 mb-2">
这将使右侧容器具有弹性布局。
英文:
You just need to add the class d-flex to the right container. The container that wraps both the buttons container and the rest:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<div class="px-md-5 px-4">
<a class="anchor-fake" onclick="MovingIn()">
<div class="d-flex gap-3 block--light block--cardShadow mb-md-4 mb-2">
<div class="card-content d-flex align-items-center">
<div class="mr-3">
<img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
</div>
<div class="card-text-20-14-400">
@premise.PremiseNickname
</div>
</div>
<div class="btn-group">
<input class="btn btn-secondary btn-lg" type="button" value="Edit">
<input class="btn btn-danger btn-lg" type="button" value="Delete">
</div>
</div>
</a>
</div>
<!-- end snippet -->
答案2
得分: 0
<!-- 开始片段：JS 隐藏：否 控制台：是 Babel：否 -->
<!-- 语言: lang-css -->
.card-content {
display: flex;
align-items: center;
}
<!-- 语言: lang-html -->
<div class="px-md-5 px-4">
<a class="anchor-fake" onclick="MovingIn()">
<div class="block block--light block--cardShadow mb-md-4 mb-2">
<div class="card-content">
<div class="mr-3">
<img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
</div>
<div class="card-text-20-14-400">
@premise.PremiseNickname
</div>
<div class="btn-group">
<input class="btn btn-secondary btn-lg" type="button" value="Edit">
<input class="btn btn-danger btn-lg" type="button" value="Delete">
</div>
</div>
</div>
</a>
</div>
<!-- 结束片段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.card-content {
display: flex;
align-items: center;
}
<!-- language: lang-html -->
<div class="px-md-5 px-4">
<a class="anchor-fake" onclick="MovingIn()">
<div class="block block--light block--cardShadow mb-md-4 mb-2">
<div class="card-content">
<div class="mr-3">
<img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
</div>
<div class="card-text-20-14-400">
@premise.PremiseNickname
</div>
<div class="btn-group">
<input class="btn btn-secondary btn-lg" type="button" value="Edit">
<input class="btn btn-danger btn-lg" type="button" value="Delete">
</div>
</div>
</div>
</a>
</div>
<!-- end snippet -->
答案3
得分: 0
将以下CSS应用于解决您的问题。
.card-content {
display: flex;
position: relative;
}
.card-content .btn-group {
display: flex;
}
.card-content .btn-group > * {
flex-shrink: 0;
}
.card-text-20-14-400 {
background: white;
display: flex;
align-items: center;
}
.card-content img {
width: 50px;
}
.btn-secondary.btn-lg {
border-radius: 0;
}
英文:
Apply the below CSS for solving your issue.
.card-content {
display: flex;
position: relative;
}
.card-content .btn-group {
display: flex;
}
.card-content .btn-group > * {
flex-shrink: 0;
}
.card-text-20-14-400 {
background: white;
display: flex;
align-items: center;
}
.card-content img {
width: 50px;
}
.btn-secondary.btn-lg {
border-radius: 0;
}
答案4
得分: 0
将 float-end 添加到 <div class="btn-group"> ：
<div class="btn-group float-end">
文档链接：https://getbootstrap.com/docs/5.0/utilities/float/
英文:
add float-end to the <div class="btn-group">
<div class="btn-group float-end">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论