html - 在 flex div 中设置子元素的响应宽度

Question

在我的应用程序中，有一个登录页面，其中包含一个自定义的引导程序，其中包含登录表单。看起来像这样

代码就像

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4">
    <div class="animated fadeInDown">
      <div class="well no-padding">
        <!-- Content Of Login Form -->
      </div>
    </div>
  </div>
  <div class="col-lg-4"></div>
</div>

现在，我必须把它放在页面的中心。水平和垂直。所以我删除了所有的引导列网格。将井放在具有 display flex 属性的自定义容器内。

<div class="login-container">
  <div class="animated fadeInDown">
    <div class="well no-padding">
      <!-- Content Of Login Form -->
    </div>
  </div>
</div> 

的CSS.login-container

.login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

现在，登录表单如下所示

如何获得与我之前在col-lg-4井的引导网格中相同的响应宽度。我试图在容器内提供网格，但这对我不起作用。我想要像这样的登录表单，没有硬编码宽度，像这样。

我通过硬编码井的宽度来完成这个问题。

标签： htmltwitter-bootstrapcssflexbox

Answer 1

如果您希望父框占据整个宽度，则属性 position: fixed 不考虑父框的宽度，因此一种解决方案是使用 jQuery 代码计算父框的宽度并将其应用于子框。这是一个例子：

let parentWidth = parseInt($('.col-sm-4.login-container').css('width'));
let parentPadding = parseInt($('.col-sm-4.login-container').css('padding').split(' ')[1]) * 2;
let childWidth = parentWidth - parentPadding;

$('.login').css('width', childWidth);

.container {
  background: black;
}

.col-sm-4 {
  background: #eee;
  height: 100vh;
}

.login-container {
  display: flex;
  align-items: center;
}

.login {
  width: 100%;
  height: 100px;
  background: red;
  position: fixed;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4 login-container">
      <div class="login"></div>
    </div>
    <div class="col-sm-4"></div>
  </div>
</div>

我希望它对你有帮助。