Question

我正在做一个预加载器，并且在行中挣扎。我希望灰色矩形填充3行，高度为33％。

那我需要：

第1行中的svg徽标
第2行中的加载器
在第3行中，一些文本

这就是我想要的：

这是我的代码：

#loader-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0, 0.9);
    z-index: 100000;
}

.rectangle-chargement {
    width: 25%;
    height: 50%;
    top: 25%;
    left: 37.5%;
    position: absolute;
    background-color: #E2E2E2;
    border-radius: 0.15rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>



<div id="loader-modal">
    <div class="d-flex justify-content-center mx-auto rectangle-chargement">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <svg width="100%" version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 652 652" style="enable-background:new 0 0 652 652;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#6846C6;}
</style>
                        <g id="Layer_1">
                            <path class="st0" d="M53.5,359.1c-6.3,0-11.4-5.1-11.4-11.4v-53.8c0-6.3,5.1-11.4,11.4-11.4h10.2v-20.4h-6.4
		c-19.7,0-35.6,15.9-35.6,35.6v46.2c0,19.7,15.9,35.6,35.6,35.6h6.4v-20.4H53.5z"/>
                            <path class="st0" d="M589.9,282.5c6.3,0,11.4,5.1,11.4,11.4v53.8c0,6.3-5.1,11.4-11.4,11.4h-10.2v20.4h6.4
		c19.7,0,35.6-15.9,35.6-35.6v-46.2c0-19.7-15.9-35.6-35.6-35.6h-6.4v20.4L589.9,282.5L589.9,282.5z"/>
                            <path class="st0" d="M176.2,327.1c0-19.3-13.6-31.1-31.2-31.1c-18.3,0-32,12.9-32,30.9c0,17.8,13.5,30.9,34.2,30.9
		c10.8,0,19.2-3.3,24.7-9.7l-9.2-10c-4.1,3.9-8.7,5.8-15,5.8c-9.1,0-15.5-4.6-17.2-12h45.3C176,330.3,176.2,328.4,176.2,327.1z
		 M130.3,321.6c1.2-7.7,6.9-12.5,14.8-12.5c7.8,0,13.5,4.9,14.7,12.5H130.3z"/>
                            <path class="st0" d="M251.4,356.8l-23.2-30.6l22.3-29.3h-18.5l-13,17.5l-12.7-17.5h-19.5l22.3,29.8L186,356.8H205l13.6-18.4
		l13.2,18.4H251.4z"/>
                            <path class="st0" d="M302.8,296c-8,0-14.5,2.6-18.8,7.8v-6.9h-16.6v81.6h17.4v-28c4.5,4.9,10.6,7.2,18,7.2
		c16.8,0,29.9-12,29.9-30.9C332.7,308,319.7,296,302.8,296z M299.8,343.5c-8.7,0-15.3-6.2-15.3-16.6s6.6-16.6,15.3-16.6
		s15.3,6.2,15.3,16.6S308.5,343.5,299.8,343.5z"/>
                            <path class="st0" d="M350.5,274.2h17.4v82.7h-17.4V274.2z"/>
                            <path class="st0" d="M447.7,327.1c0-19.3-13.6-31.1-31.2-31.1c-18.3,0-32,12.9-32,30.9c0,17.8,13.5,30.9,34.2,30.9
		c10.8,0,19.2-3.3,24.7-9.7l-9.2-10c-4.1,3.9-8.7,5.8-15,5.8c-9.1,0-15.5-4.6-17.2-12h45.3C447.5,330.3,447.7,328.4,447.7,327.1z
		 M401.8,321.6c1.2-7.7,6.9-12.5,14.8-12.5c7.8,0,13.5,4.9,14.7,12.5H401.8z"/>
                            <path class="st0" d="M494.1,296c-19.1,0-33,12.8-33,30.9c0,18,13.9,30.9,33,30.9c19.1,0,32.9-12.8,32.9-30.9
		C526.9,308.8,513.1,296,494.1,296z M494.1,343.5c-8.7,0-15.4-6.2-15.4-16.6s6.7-16.6,15.4-16.6c8.7,0,15.3,6.2,15.3,16.6
		S502.8,343.5,494.1,343.5z"/>
                        </g>
</svg>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-center" id="loader-circulaire">
                        <div id="chargement-loader"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="d-flex justify-content-center mx-auto patienter-chargement">Veuillez patienter ...</p>
                </div>
            </div>
        </div>
    </div>
</div>

你们知道更清洁的方式吗？（当然是可行的）

Answer 1

您当然可以对高度进行硬编码，但是由于您询问是否有更清洁的方法，我的观点是将 flexbox 用于列流方向，并让 flexbox < / em>孩子通过将其flex-grow设置为1来成长。

这种方式不需要您为每一行的高度进行硬编码，并且可以让您拥有“想要”的行数。

<div class="rectangle-chargement d-flex flex-column"> <div class="rectangle-chargement-row flex-grow-1"> Logo </div> <div class="rectangle-chargement-row flex-grow-1"> Loader </div> <div class="rectangle-chargement-row flex-grow-1"> Some text </div> </div>

演示： https://jsfiddle.net/davidliang2008/sngkbLcq/32/

如果要“集中”每一行中的内容，也可以将每一行都标记为 flexbox ，并将其justify-content和align-items设置为居中。

<div class="rectangle-chargement d-flex flex-column"> <div class="rectangle-chargement-row flex-grow-1 d-flex justify-content-center align-items-center"> Logo </div> <div class="rectangle-chargement-row flex-grow-1 d-flex justify-content-center align-items-center"> Loader </div> <div class="rectangle-chargement-row flex-grow-1 d-flex justify-content-center align-items-center"> Some text </div> </div>

演示： https://jsfiddle.net/davidliang2008/sngkbLcq/36/

Bootstrap 4：3行，每行33％的高度

1 个答案: