如何使用HTML CSS和Bootstrap 4使行和列容器垂直堆叠并缩放移动视图_Html_Css_Bootstrap 4

如何使用HTML CSS和Bootstrap 4使行和列容器垂直堆叠并缩放移动视图

html css bootstrap-4

如何使用HTML CSS和Bootstrap 4使行和列容器垂直堆叠并缩放移动视图,html,css,bootstrap-4,Html,Css,Bootstrap 4,使用引导网格系统来组织文本框，这些文本框以2×2的形式排列在网页上。从桌面视图中，行和列的内容看起来很好，尽管很容易调整宽度但是，当从移动视图查看网页时，页面内容不会相应缩放。盒子缩小，变得很难阅读理想情况下，当从手机上查看网页时，这些框会自动调整大小并垂直堆叠在一起。基本上，内容应该相应地缩放，以便从手机上轻松读取而不是： [A] [乙] [C] [丁] 这就是他们在手机上的表现 [A] [乙] [丙] [丁] 实现这一目标的最佳方法是什么？这是一张背景图片移动视图： HTML &

使用引导网格系统来组织文本框，这些文本框以2×2的形式排列在网页上。从桌面视图中，行和列的内容看起来很好，尽管很容易调整宽度

但是，当从移动视图查看网页时，页面内容不会相应缩放。盒子缩小，变得很难阅读

理想情况下，当从手机上查看网页时，这些框会自动调整大小并垂直堆叠在一起。基本上，内容应该相应地缩放，以便从手机上轻松读取

而不是： [A] [乙] [C] [丁]

这就是他们在手机上的表现

[A]

[乙]

[丙]

[丁]

实现这一目标的最佳方法是什么？这是一张背景图片

移动视图：

HTML

<html>
    <head>
    <title>site</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">   
    </head>
    <body>
        
        <div class="container"> <!--bootstrap class-->
            <div class="services">
                <h1>Our <span>Services</span></h1>
                <p>text here</p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="service-box">
                        <i class="fa fa-smile-o" aria-hidden="true"></i>
                        <h3><span>Box A</span></h3>
                        <p>
                            Text
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="service-box">
                        <i class="fa fa-eye" aria-hidden="true"></i>
                    <h3><span>Box B</span></h3>
                    <p><b>List:</b><br>                   
                        1<br>
                        2<br>
                        3<br>
                        4<br>
                        5<br>
                        6<br>
                        7<br>
                        8<br>
                        9<br>
                        10
                    </p>
                    </div>
                </div>

            </div>
                <div class="row" style="margin-top: 35px">
                <div class="col-md-6">
                    <div class="service-box">
                    <i class="fa fa-pencil"></i>
                    <h3><span>Box C</span></h3>
                    <p>
                        I<br>
                        II<br>
                        III<br>                       
                    </p>

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="service-box">
                    <i class="fa fa-shield"></i>
                    <h3><span>Box D</span></h3>
                    <p>
                        Defender<br>
                    </p>
                </div>
                </div>
            </div>
            <a href="#" class="home-button"><i class="fa fa-home" aria-hidden="true"></i> HOME</a>
        </div>
</body>
</html>

你能试试这个代码吗

您能尝试一下所有div col类的代码吗

*
{
    margin: 0;
    padding: 0;
}
body
{
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}
.services
{
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    font-size: xx-large;
}
.services p
{
    text-align: center;
    font-size: x-large;
}
span
{
    background: linear-gradient(to right, #ff105f, #ffad06);
    -webkit-background-clip: text;
    color: transparent;
}
.service-box
{
    box-shadow: 0 0 4px 0 #ffa709;  
    padding: 15px;
    position: relative;
    margin-bottom: 30px;
    height:100%;
}
.service-box .fa
{
    background: linear-gradient(to right, #ff105f, #ffad06);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 50px !important;
    margin-bottom: 20px;
}
p
{
    text-align: justify;
}
.service-box a
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    background: linear-gradient(to right, #ff105f, #ffad06);
    text-align: center;
    right: 20px;
    bottom: -20px;
    position: absolute;
}

.service-box a .fa
{
    color: #fff;
    font-size: 25px !important;
    padding-top: 6px;
}

@media (min-width: @screen-sm-min) {  

}

 <div class="col-md-12">