将行嵌套在Bootstrap 4列中 [英] Nest rows inside a bootstrap 4 column
本文介绍了将行嵌套在Bootstrap 4列中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试在一个列中嵌套多行.
最后，它应该看起来像
I try to nest multiple rows in a column.
In the end it should look like
问题是我将整个内容垂直居中，而css规则似乎也适用于我的子行.如何停止对齐并使其看起来像我想要的? 这是到目前为止我得到的:
The problem is that I centered the whole thing vertically and the css rule seems to apply also on my child rows. How can I stop this alignment and make it look like I want? Here is what I got so far:
.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>
推荐答案
对齐容器而不是对齐内容.将CSS应用于body
Align the container instead of aligning the content. Apply your CSS to the body
body {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container"> <!-- this is mandatory when using row -->
<div class="row justify-content-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>
</div>
这篇关于将行嵌套在Bootstrap 4列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
