【发布时间】:2021-08-15 10:42:30
【问题描述】:
我正在制作一个包含一些文本的部分,但我需要该部分右半部分的文本,而左侧有该部分的背景图像,所以我为未使用的一半制作了 col-md-4,因为我不想将背景图片和col-md-8隐藏到文本中,如何在小屏幕上隐藏col-md-4部分并让col-md-8覆盖整个部分?我正在使用引导程序 5
代码:
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4"></div>
<div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
桌面上的输出:
手机上的输出:
【问题讨论】:
标签: html css twitter-bootstrap bootstrap-grid