css Bootstrap中基于屏幕大小的不同div宽度

iibxawm4 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(178)

我想坚持使用本机引导实用程序类，但我找不到合适的解决方案。
我希望这一部分为50%的大屏幕和75%的小设备：

<div class="col-10 col-xl-8 justify-content-center align-items-center h-100">
    <div class="text-white w-75 shaded-background">
      <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
      <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
    </div>
  </div>

https://codepen.io/literakl/pen/XWyjdMo
没有w-xl-50这样的类。如果无法使用xl选择器，我正在考虑@media screen and (min-width: 1024px)作为一个变通方法。更好的主意？

css

来源：https://stackoverflow.com/questions/76547912/different-div-width-based-on-screen-size-in-bootstrap

1条答案

按热度按时间

xesrikrc1#

删除w-75并使用col-9 col-lg-6。
col-9声明了width: 75%，col-lg-6声明了width: 50%（最小宽度：992px）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
  .shaded-background {
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
  }
</style>

<div class="d-flex justify-content-center align-items-center h-100">
  <div class="text-white col-9 col-lg-6 shaded-background">
    <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
    <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
  </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css Bootstrap中基于屏幕大小的不同div宽度

1条答案

相关问题

热门标签

最新问答