установка чувствительной ширины дочернего элемента внутри гибкого div - PullRequest
Новая
       10

установка чувствительной ширины дочернего элемента внутри гибкого div

0 голосов
/ 30 августа 2018

В моем приложении есть страница входа с настроенной загрузочной страницей, содержащей форму входа. Похоже на это

enter image description here

Код был как 

<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;
}

Теперь форма входа выглядит следующим образом

enter image description here

Как получить такую ​​же чувствительную ширину, как у меня ранее, внутри загрузочной сетки col-lg-4 сетки скважины. Я пытался дать сетки внутри контейнера, но это не сработало для меня. Я хочу что-то вроде формы входа без ширины жесткого кода, что-то вроде этого.

enter image description here

Это я сделал только для целей вопроса путем жесткого кодирования ширины скважины.

1 Ответ

0 голосов
/ 30 августа 2018

Свойство 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>

Надеюсь, это поможет вам.

...