Bootstrap 如何使行在小型设备中可见？

goucqfw6 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(185)

我已经更改了CSS文件中行的边距，但它不会应用于小型设备

<body style="background-color: #353839;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mt-2" style="color: white;">Cyber Cloud</h1>
            </div>
        </div>          
        <div class="row  r1 " style="background-color: black; ">
            <div class="col-12 ">
                <h3 class="text-center" style="color: white;">Join Now</h3>
                <p class="text-center" style="color: white;">And Start Buying Games</p>                                        
            </div>
            <div class="row ">
                <div class="col-12 r2">
                    <input type="text" placeholder="Email"/>

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

我的CSS：

.r1{

    margin-left: 500px;
    margin-right: 500px;
    

    
}

我已经尝试应用引导响应CSS（添加了d-无d-lg-块），但它不工作。

twitter-bootstrap

来源：https://stackoverflow.com/questions/74389269/how-can-i-make-the-row-visible-in-small-devices

2条答案

按热度按时间

qhhrdooz1#

尝试使用css中的媒体查询并设置设备的显示宽度，使用开发人员工具更改显示宽度以模拟设备

@media only screen and (max-width: 600px){
.r1{
margin-left: 500px;
margin-right: 500px;
}
}

我希望这能奏效

赞(0）回复(0）举报 2022-12-07

qnyhuwrf2#

试试这段代码。 Bootstrap 4和5让你能够显示或不显示一个元素。我在你想在小设备上显示的那一行添加了d-md-none，它不会在宽设备上显示。

<div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mt-2" style="color: black;">Cyber Cloud</h1>
            </div>
        </div>          
        <div class="row  d-md-none" style="background-color: black; ">
            <div class="col-12 ">
                <h3 class="text-center" style="color: white;">Join Now</h3>
                <p class="text-center" style="color: white;">And Start Buying Games</p>                                        
            </div>
            <div class="row ">
                <div class="col-12 r2">
                    <input type="text" placeholder="Email"/>

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何使行在小型设备中可见？

2条答案

相关问题

热门标签

最新问答