我的卡片的頁腳有一些元素，最后我有一個表單。然而，這個表單被放在其他元素的底部，而我希望它在最后一個元素的右邊（我使用 bootstrap）。
。 . css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 ！ important;
}<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>>
<meta charset="UTF-8"/span>>
<title>/span>Title</title>/span>
</head>/span>
<body>
<div class="container">
<div class=" row">
<div class="col-md-12"/span>>
<div class="card bg-light"/span>>
<div class="card-body"/span>>
<p>
測驗
</p>/span>測驗
</div>/span>
<div class="card-footer">
<div class="float-start">/span>
<div class="text-start"/span>>
<p class="card-text"/span>>
<small class="text-muted">/span>
<a class="card-subtitle css123 text-muted mt-2 me-1"/span>> Test1</a>
<a class="card-subtitle css123 text-muted mt-2 me-1"> Test2</a>。
<a class="card-subtitle css123 text-muted mt-2 me-1"> Test3</a>。
< form action="#" id="form-js">
<a id="count-js"
class="card-subtitle css123 text-muted me-1"> 123
Like(s)</a>123
< input type="hidden" id="post-id-js">
<button type="submit"
class="card-subtitle css123 text-muted me-1">/span>
比如說
</button>
</form>/span>
</small>/span>
</p>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</body>
</html>/span>Cordially
uj5u.com熱心網友回復：
調整你的標記，從段落中移除表單，然后移除div.float-start和div.text-start包裝器（它們沒有影響）。接下來在div.card-footer中添加.d-flex。在下面的例子中，我還添加了.ms-auto到表單中，以使其右對齊（移除該類以使所有東西都 "浮動 "到左邊）。
span class="hljs-selector-class">.css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 ！ important;
}<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>>
<meta charset="UTF-8"/span>>
<title>/span>Title</title>/span>
</head>/span>
<body>
<div class="container">
<div class=" row">
<div class="col-md-12"/span>>
<div class="card bg-light"/span>>
<div class="card-body"/span>>
<p>
測驗
</p>/span>測驗
</div>/span>
<div class="card-footer d-flex">/span>
<p class="card-text"/span>>
<small class="text-muted">/span>
<a class="card-subtitle css123 text-muted mt-2 me-1"/span>> Test1</a>
<a class="card-subtitle css123 text-muted mt-2 me-1"> Test2</a>。
<a class="card-subtitle css123 text-muted mt-2 me-1"> Test3</a>。
</small>/span>
</p>/span>
< form action="#"/span> id="form-js" class="ms-auto">
<small>
< a id="count-js" class="card-subtitle css123 text-muted me-1" > 123
Like(s)</a>123
< input type="hidden" id="post-id-js">
< button type="submit" class="card-subtitle css123 text-muted me-1" >
比如說
</button>
</small>/span>
</form>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321629.html
標籤：