По горизонтали и вертикали центр начальной загрузки 4 столбца в последовательных рядах - PullRequest
Новая
       28

По горизонтали и вертикали центр начальной загрузки 4 столбца в последовательных рядах

0 голосов
/ 16 февраля 2019

Я пытаюсь просто выровнять по центру выравнивание и выровнять два столбца начальной загрузки внутри контейнера.Столбцы находятся в разных строках.

Расположение сетки: 

<body style="height: 100vh;">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

карты предназначены только для контура контейнеров.

Я знаю, что МНОГИЕ вопросывертикальное выравнивание, и я, возможно, пропустил тот, который содержит ответ, который мне нужен.Но я забираю у большинства из них то, что родитель должен иметь некоторую высоту.
Следующее прекрасно работает, если у вас только одна строка, потому что вы можете центрировать столбец в строке высоты 100%.Но если у вас есть две строки, это не очень хорошо, поскольку каждый столбец центрируется в своей строке, и каждая строка имеет высоту окна. 

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

Я бы хотел просто переместитьjustify-content-center align-items-center до контейнера, но, увы, похоже, он ничего не делает.

Итак, пожалуйста, помогите мне, как я могу поместить эти флеш, один поверх другого, попахивая посерединеэкрана?

Ответы [ 3 ]

0 голосов
/ 24 февраля 2019

Вот хороший способ сделать это с помощью сборки Bootstrap во флексбоксах. 

<div class="container d-flex h-100 flex-column">
    <div class="flex-grow-1"></div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM A</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM B</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM C</div>
        </div>
    </div>
    <div class="flex-grow-1"></div>
</div>

У нас есть две строки flex буфера, с flex-grow-1.Каждый из этих рядов будет расширяться (с одинаковым весом), чтобы заполнить верхнюю и нижнюю части одинаково.Каждая из строк содержимого в середине будет иметь высоту своего содержимого.

Конечным результатом являются карты ITEM, центрированные по вертикали и горизонтали на экране.Поскольку они находятся в отдельных строках, вы можете настроить поля / отступы по мере необходимости (по умолчанию они располагаются рядом друг с другом по вертикали.

Пример снимка экрана приведенного выше кода в начальной загрузке

Вы могли бы сделать это с одной строкой + столбцом и внутренним flexbox, но это дает вам меньше контроля над тем, как отдельные карты выглядят по отношению друг к другу.

РЕДАКТИРОВАТЬ: d-flex делаетконтейнер flex-контейнер вокруг его дочерних строк, а flex-column заставляет дочерние элементы визуализироваться и растягиваться по вертикали, а не по горизонтали.

0 голосов
/ 25 февраля 2019

Самое простое решение - сделать строки 50% высоты вместо ... 

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

Демо: https://www.codeply.com/go/7POJtgNaQI

Или, flexbox - это использование класса Bootstrap flex-grow-1.Также вам не нужна высота на теле.Просто используйте min-vh-100 на контейнере ... 

<div class="container d-flex flex-column min-vh-100">
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-6">
            <div class="card">
                hello
            </div>
        </div>
    </div>
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-4">
            <div class="card">
                world
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/n1eL2Jakuo

0 голосов
/ 16 февраля 2019

Всегда задавайте высоту через высоту inner element. Если я дам элемент класса height на container, он не будет работать, поэтому пусть container зависит от высоты inner element's, поэтомупопробуй вот так.

Set Container Height through Inner Element's Height

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container mt-3">
	<div class="col-12" style="min-height: 180px;">
		<div
			class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">

			<div class="col-6 pr-2">
				<div class="card text-center">
					hello
				</div>
			</div>

			<div class="col-6 pl-2">
				<div class="card text-center">
					world
				</div>
			</div>

		</div>
	</div>
</div>

Надеюсь, вы поймете этот крошечный беспорядок, и поэтому он поможет вам.

...