Question

我尝试在一列中嵌套多行。
最后，它应该看起来像

问题是我将整个内容垂直居中，而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>

Answer 1

对齐容器而不是对齐内容。将CSS应用于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列中

1 个答案: