Question

我正在为我的项目使用引导程序标准媒体查询，除了小型平板电脑和横向模式外，它们都工作正常。我已附上一张图片以显示此内容。我假设这是因为我在页面ex的许多部分都具有自定义CSS。页边距。我的客户要求使用非方形背景图像，因此，为了将文本放在背景图像上居中，我不得不做很多自定义CSS，这让我发疯了，在此之前，我从未处理过非方形图像。我尝试将这些媒体查询中的所有内容对齐，但这会以负面方式影响另一台设备。

有人可以建议如何解决此问题吗？我是否需要添加其他媒体查询以使其全部正常运行？

我只会添加媒体查询代码和价格列代码，因为我在整个网站上都有很多代码。我还将把工作链接附加到网站上。就像我说的那样，它在移动人像，ipad人像/风景，台式机上看起来都不错，但在小型平板电脑或风景手机中却无法使用。

Website link

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

/* Extra small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) {
    .intro {
        text-align: center;
    }
    .intro1 {
        padding-top: 50px;
        font-size: 55px;
    }
    .intro2 {
        font-size: 55px;
    }
    .intro3 {
        font-size: 25px;
    }
    .jumbo_features {
        width: 80%;
    }
    #img_prev {
        display: none;

    }

    #img_next {
        display: none;
    }
    #content4 {
        margin-top: -230px;
    }

    .view2 {
        background-position: center;
    }
    .price_container {
        height: 100%;
        width: 90%;
        background-color: #fff;
    }

    .card {
        height: 670px;
        margin: 1rem;
    }


    .form-control {
        width: 275px;
    }

    #content6 {
        margin-top: -60px;
    }
}

/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) and (max-width: 767.98px) {
    .view {

        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        width: 100%;
        height: 150%;
    }

    .jumbo_features {
        width: 45%;
    }

    #img_prev {
        display: none;

    }

    #img_next {
        display: none;
    }

    .integration {
        margin-top: 250px;
    }

    .price_container {
        background-color: inherit;
    }


}

@media (min-width: 600px) and (max-width: 800px) {}

/*Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) and (max-width: 991.98px) {
    .jumbo_features {
        width: 80%;
    }
    .view2 {
        background-position: center;
    }
    .integration {
        margin-top: 240px;
    }

    #content4 {
        margin-top: -350px;
    }

    .price_container {
        width: 95%;
    }

    .card {
        width: 13rem;
        height: 670px;
    }
}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) and (max-width: 1199.98px) {
    .price_container {
        width: 90%;
    }

    .integration {
        margin-top: 190px;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .price_container {
        background-color: #eae8f5;
        background-size: cover;
        border-radius: 30px;
        height: 750px;
        margin-top: 50px;
        justify-content: center;
        width: 80%;
    }

    .integration {
        margin-top: 140px;

    }
}

<div id="content4">
    <section>
        <h1 class="text-center">Pricing</h1>
        <br>
        <div class="container-fluid d-flex align-items-center price_container text-center">
            <div class="row">
                <div class="col-md-4 text-center">
                    <div class="card">
                        <div class="card-header">Educator</div>
                        <div class="card-body d-flex flex-column">
                            <img src="img/price_edu.png" class="img-fluid">
                            <h7 class="card-title"><b>Use Wanzeru Ed</b></h7>
                            <ul>
                                <li>FREE for ONE class</li>
                                <li>Matches students into ideal teams</li>
                                <li>Real-time feedback</li>
                            </ul>
                            <button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff; bottom:5px;">Get Quotes</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="card">
                        <div class="card-header">Individual</div>
                        <div class="card-body d-flex flex-column">
                            <img src="img/price_indi.png" class="img-fluid">
                            <h7 class="card-title"><b>Hire Wanzeru to be your meeting (Find word)</b></h7>
                            <ul>
                                <li>$9.99/month</li>
                                <li>Schedules unlimited meetings</li>
                                <li>Facilitates unlimited meetings</li>
                                <li>Takes meeting notes</li>
                                <li>Assigns meeting tasks</li>
                                <li>Sends reminders</li>
                                <li>Digital badging for skills</li>
                            </ul>
                            <button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">$9.99/ month</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="card">
                        <div class="card-header">Business</div>
                        <div class="card-body d-flex flex-column">
                            <img src="img/price_entur.png" class="img-fluid">
                            <h7 class="card-title"><b>Hire Wanzeru for your business team</b></h7>
                            <ul>
                                <li>Schedules all team meetings</li>
                                <li>Facilitates every meetings</li>
                                <li>Takes meeting notes</li>
                                <li>Assigns meeting tasks</li>
                                <li>Sends reminders</li>
                                <li>Digital badging for skills</li>
                                <li>Provides real time progress reports of each team</li>
                                <li>Fully compliant with each business data policy</li>
                            </ul>
                            <button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">Get Quotes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

您在谈论这个问题吗？

我看过您的代码，该问题似乎是断点设置问题。我为md屏幕应用了一个小修正。仅在md分辨率上尝试使用此CSS代码，我已经在600px的宽度上对其进行了测试，您需要根据断点是否小于600px进行一些小的修复，但是我认为这并不困难。

// remove the width from the .cards class and set the height to 680px
.card {
    /* width: 17rem; */
    border-radius: 30px;
    height: 680px;
}
// remove the padding from the .cards-body class
.card-body{
padding: 0;
}
// remove the margin from your container-fluid
.container-fluid d-flex align-items-center price_container text-center{
margin: 0;
}

结果：

Answer 2

事实证明，我需要为每张卡添加col-sm-4。一旦我做了，就不再有任何重叠。

Bootstrap媒体查询不适用于小型平板电脑和横向模式

2 个答案: