Создай дизайн с помощью bootstrap 4 с flex-контейнерами - PullRequest
0 голосов
/ 24 февраля 2019

Я пытаюсь создать макет как: enter image description here

Описание:

  • Компоненты A и B должны иметь ширину 50% и 100% height od all page.
  • Компонент C должен располагаться по центру по горизонтали и вертикали.
  • Компонент D должен быть вверху.
  • A содержит C.
  • B содержит D.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color: blue;
}

.row-height100
{
  min-height: 100%;
}

</style>

</head>
<body class="d-flex">

<div class="flex-fill flex-row row-height100 justify-content-center">
<div class="flex-fill p-2 bg-success d-flex justify-content-center row-height100">
        <div>Flex item 1</div>
</div>
<div class="flex-fill p-2 bg-success d-flex justify-content-start row-height100">Flex item 2</div>
</div>


</body>
</html>

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019
  1. Измените ваше тело или элемент div, заключающий элементы в flexbox , используя d-flex и используйте h-100 для создания flexboxв полный рост.
  2. И flex-fill обоим элементам "A" и "B", чтобы они могли делиться и занимать 50% от полной ширины.
  3. Измените оба элемента "A" и "B" на flexbox, тоже используя d-flex.
  4. По горизонтали отцентрируйте содержимое элементов "C" и "D", используя justify-content-center.
  5. ВертикальноВыровняйте по центру содержимое элемента "C", используя align-items-center.
  6. Вертикально выровняйте содержимое элемента "D", используя align-items-start.

Проверьте и запустите следующий Фрагмент кода для практического примера того, что я описал выше:

/* CSS */

html, body {height: 100%;width: 100%;}
body {min-height: 100%;background-color: blue;}

/* ignore following two css properties. Added just for visual example's sake */
.flex-fill {border: 4px solid #000;}
.flex-fill div {border: 4px solid #000; background-color: #FFF; padding: 5px;}
<!-- Scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- HTML -->

<div class="d-flex h-100">
    <div class="flex-fill d-flex justify-content-center align-items-center bg-success">
      <div>Flex item 1</div>
    </div>
    <div class="flex-fill d-flex justify-content-center align-items-start bg-success">
      <div>Flex item 2</div>
    </div>
</div>
0 голосов
/ 24 февраля 2019

html {
  height:100%;
}

body {
  margin:0;
  height:100%;
  display: flex;
}

.a, .b {
  flex:1;
  position: relative;
}

.a {
  border-right:2px solid;
}

.c {
  border:2px solid;
  position: absolute;
  height: 200px;
  width: 200px;
  left: 50%;
  transform:translate(-50%,-50%);
  top:50%;
}

.d {
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  top:20px;
  width: 80%;
  height: 70px;
  border:2px solid;
}
<div class="a">
  <div class="c"></div>
</div>
<div class="b">
  <div class="d"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...