Я пытаюсь вложить несколько строк в столбец.
В конце это должно выглядеть так:
Проблема в том, что я центрировалсявсе это по вертикали и правило css, кажется, применимо и к моим дочерним строкам.Как я могу остановить это выравнивание и заставить его выглядеть так, как я хочу?Вот что я получил до сих пор:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center vertical-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5"/>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</body>
</html>