Question

请帮助我

我正在使用bootstrap-4和布景设计，但问题是当我输入较大或较小的文本但真正的ipad并非全高时，我的Box-inner div在台式机上在所有div相同高度的桌面上都能正常工作，但我有附件截图桌面输出和真实ipad输出的信息，请帮助为什么不将真实ipad中的所有列全高。

台式机输出快照：

真实的ipad输出屏幕截图：

.features-box-style {
                padding: 100px 0;
            }
            .features-box-style .box-inner {
                border: 1px solid #dbdbdb;
                border-radius: 4px;
                padding-top: 18%;
                padding-bottom: 18%;
                text-align: center;
                height: 100%;
            }
            .features-box-style .box-inner .icon {
                width: 70px;
                height: 70px;
                display: inline-block;
                background-color: #000;
                color: #fff;
                border-radius: 100%;
                text-align: center;
                line-height: 70px;
                font-size: 25px;
                font-weight: bold;
                margin-bottom: 20px;
            }
            .features-box-style .box-inner .content {
                width: 75%;
                margin: 0 auto;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="features-box-style">
            <div class="container">                
                <div class="row">
                    <div class="col-12 col-lg-3 col-md-6 box">
                        <div class="box-inner">
                            <div class="icon">?</div>
                            <div class="small-title">Pixel Perfect Design</div>
                            <p class="content">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6 box">
                        <div class="box-inner">
                            <div class="icon">?</div>
                            <div class="small-title">Pixel Perfect Design</div>
                            <p class="content">Lorem Ipsum is simply text of the printing and typesetting industry. </p>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6 box">
                        <div class="box-inner">
                            <div class="icon">?</div>
                            <div class="small-title">Pixel Perfect Design</div>
                            <p class="content">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy.</p>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3 col-md-6 box">
                        <div class="box-inner">
                            <div class="icon">?</div>
                            <div class="small-title">Pixel Perfect Design</div>
                            <p class="content">Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy. Lorem Ipsum is simply text of the printing and typesetting industry. Lorem Ipsum has been standard dummy. Lorem Ipsum is simply text of the printing.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

尝试flexbox来拉伸div元素。

<div class="col-12 col-lg-3 col-md-6 d-flex align-items-stretch">

此align-items-stretch将填充剩余的空间。

如何在Bootstrap 4的box-inner div中设置全高？

1 个答案: