主页 / 问题 / 1083993
Accepted
EgorG
Asked:2020-02-18 03:25:17 +0000 UTC2020-02-18 03:25:17 +0000 UTC

元素定位在 bootstrap4 中不起作用

  • 772

大家好。我正在做一个反应学校项目。对于布局，我使用 bootstrap4。在 .container 元素内，有一行包含 .content 类。使用 align-items-center 类，不可能将元素沿垂直轴放在中间，元素保持在原地，有什么问题吗？

<div className='app'>
<div className='container'>
  <div className="row align-items-center justify-content-center content">
    <div className="col-7 col-content">
      <Switch>
        <Route path={'/'} exact component={Calc} />
        <Route path={'/notebook'} component={Note} />
      </Switch>
    </div>
  </div>
</div>


.app {
    height: 100vh;
    width: 100%;
    background-color: #93e1ed;
    }

.container {
    height: 100vh;
}

.content {
    .col-content {
        background-color: #fff;
        min-width: 900px;
        border-radius: $br-radius;

        .main-content {
            height: 415px;
        }
    }
}
html

2 个回答

  1. Best Answer

    因为 .content 类的行没有高度。您将 height: 100vh 设置为容器，并且您试图垂直对齐行内的元素。但是行的高度等于内部元素的高度，所以不能对align-items-center有任何反应。

    现在，如果您设置行高，那么一切都会正常工作：

    .app {
    height: 100vh;
    width: 100%;
    background-color: #93e1ed;
    }
    .content {
      border: 1px solid red;
      height: 100vh;
    }
.container {
    height: 100vh;
}
.col-content {
  background-color: #fff;
  min-width: 900px;
  border-radius: $br-radius;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class='app'>
  <div class='container'>
    <div class="row align-items-center justify-content-center content">
      <div class="col-7 col-content">
        Какой-то контент
      </div>
    </div>
  </div>
</div>

    • 1

  2. 可能我有些看不懂，但是在 HTML 中，一个类是用来设置的

    <div class='classname'></div>
    • 0

相关问题