#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
У меня такое чувство, что на мой вопрос есть простой ответ, но мне трудно сформулировать его, не найдя подходящего ответа. Я хочу переместить кнопку, используя CSS, ниже другой кнопки, но не могу поместить этот элемент под ней в HTML. Ниже приведена упрощенная версия кода, с которым я работаю, чтобы проиллюстрировать мою проблему:
<form class="form1">
<!-- other input elements -->
<button class="button1"></button>
</form>
<form class="form2">
<button class="button2"></button>
</form>
«form1» должен оставаться выше «form2», но я хочу переместить «button1» ниже «button2». Можно ли это сделать с помощью CSS? Если это поможет, я использую Bootstrap 4.
Редактировать: Спасибо за ответы! Я должен был быть более понятным, и я обновил свой код выше, который, я надеюсь, поможет. В «form1» есть некоторые другие элементы ввода, которые должны отображаться над «form2». Конечно, как есть, это так. Однако я хочу переместить не form1 ниже form2, а только button1 ниже button2. Все остальные элементы в form1 я хочу оставить выше form2.
Комментарии:
1. вы можете использовать
position:absoluteсвойство css для «button1», чтобы переместить его куда угодно, не затрагивая другие элементы2. вы не хотите добавлять или изменять HTML-код?
3. Это звучит как проблема XY , какую проблему вы на самом деле пытаетесь решить? Минимальные примеры хороши, но есть такая вещь, как слишком минимальные, если не учитывать важный контекст.
4. @JonP Да, вы действительно правы. Полный контекст: у меня есть форма, которая включает в себя список с соответствующими флажками и кнопку, которая удаляет те элементы, которые отмечены. Под этой формой находится другая форма, в которой есть ввод, позволяющий пользователям что-то добавлять, и кнопка для подтверждения добавления этого ввода. С эстетической точки зрения наличие кнопки удаления над вводом выглядит странно, и я пытался переместить кнопку удаления ниже поля ввода.
Ответ №1:
Вы можете использовать flexbox со order свойством для визуального изменения порядка их отображения, не затрагивая структуру HTML:
.wrapper {
display: flex;
flex-direction: column;
}
.form2 {
order: -1;
} <div class="wrapper">
<form class="form1">
<button class="button1">Button 1</button>
</form>
<form class="form2">
<button class="button2">Button 2</button>
</form>
<form class="form3">
<button class="button3">Button 3</button>
</form>
</div> Ответ №2:
Вы можете создать решение, используя bootstrap 4, который вы уже используете.
Для этого решения я использовал классы порядка сетки Bootstrap 4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 order-2">
<form class="form1 ">
<button class="button1">Button 1</button>
</form>
</div>
<div class="col-12 order-1">
<form class="form2 ">
<button class="button2">Button 2</button>
</form>
</div>
</div>
</div>
</body>
</html>
Ответ №3:
Вы также можете добиться этого, используя позицию CSS:
div {position: relative}
.form1 {position: absolute;margin-top: 22px;}
.form2 {position: absolute} <div>
<form class="form1">
<button class="button1">button1</button>
</form>
<form class="form2">
<button class="button2">button2</button>
</form><div> Комментарии:
1. Есть ли способ сделать это в свете правки, которую я внес в свой пост? button1 не будет сестринским элементом для button2, поскольку оба являются дочерними элементами своих соответствующих форм, в результате мне трудно найти свойства CSS, которые имеют отношение ко мне
2. Просто попробуйте сделать родительскую позицию относительной, а дочернюю позицию абсолютной, а затем применить margin / top / left / right / bottom и т. Д. для настройки положения дочерних элементов.
3. @JerilonFenton — если это работает для вас, не забудьте принять ответ 🙂
Ответ №4:
flexbox может изменять визуальный порядок любых элементов, используя свойство order .
CSS
.wrap {
display: flex;
flex-direction: column;
}
.wrap div {
padding: 1em;
}
#first {
background: #64703b;
order: 2
}
#last {
background: #ee0000;
order: 1
}
HTML
<div class="wrap">
<form class="form1" ID="first">
<button class="button1">button1</button>
</form>
<form class="form2" ID="last">
<button class="button2">button2</button>
</form>
</div>