#html #css #twitter-bootstrap
Вопрос:
У меня есть элементы в нижнем колонтитуле моей карточки, и, наконец, у меня есть форма. Однако эта форма помещается в нижней части других элементов, в то время как я хочу, чтобы она находилась справа от последнего элемента (я использую bootstrap). Вот рабочий пример:
.css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<p>
test
</p>
</div>
<div class="card-footer ">
<div class="float-start ">
<div class="text-start">
<p class="card-text">
<small class="text-muted ">
<a class="card-subtitle css123 text-muted mt-2 me-1">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>
<input type="hidden" id="post-id-js">
<button type="submit"
class="card-subtitle css123 text-muted me-1">
Like
</button>
</form>
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Сердечно
Ответ №1:
Отрегулируйте разметку, чтобы удалить форму из абзаца, затем удалите div.float-start
div.text-start
обертки и (они не влияют). Затем добавьте .d-flex
в div.card-footer
. В приведенном ниже примере я также добавил .ms-auto
в форму, чтобы выровнять ее по правому краю (удалите класс, чтобы все «плавало» слева).
.css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<p>
test
</p>
</div>
<div class="card-footer d-flex">
<p class="card-text">
<small class="text-muted ">
<a class="card-subtitle css123 text-muted mt-2 me-1">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>
</p>
<form action="#" id="form-js" class="ms-auto">
<small>
<a id="count-js" class="card-subtitle css123 text-muted me-1">123
Like(s)</a>
<input type="hidden" id="post-id-js">
<button type="submit" class="card-subtitle css123 text-muted me-1">
Like
</button>
</small>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>