Bootstrap 4 上的非 12 分等列 [英] Non 12-divisible Equal columns on Bootstrap 4

查看：20
本文介绍了Bootstrap 4 上的非 12 分等列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个小网络应用程序，我想显示 5 列响应式等宽.

但我只想要这种布局用于宽度≥992px 的设备.对于宽度小于 992 像素的设备，我想在一个全宽行中显示 5 个 HTML 元素.

<块引用>

等宽列可以分成多行，但是有一个Safari flexbox错误 阻止它在没有显式 flex-basis 或 border.

在减少外部测试用例中记录了两种解决方法Bootstrap，但如果浏览器是最新的，这不应该是必要的.

来源:https://getbootstrap.com/docs/4.0/layout/grid/

所以，我对如何使用 Bootstrap 4 实现这种响应行为感到有些困惑.

我有这个想法"，但我觉得会很丑，你怎么看?

让我们考虑一下这个标记

<div class="row"><div class="col">Column</div><div class="sep"></div><div class="col">Column</div><div class="sep"></div><div class="col">Column</div><div class="sep"></div><div class="col">Column</div>

然后，使用 jQuery 我可以选择 .sep 并在宽度 <992px 的情况下添加 bootstrap4 类 w-100.

感谢阅读，请原谅我的英语不好.

解决方案

也许我不明白这个问题.为什么不直接使用 lg 自动布局列 (col-lg)?

https://www.codeply.com/go/OohsSfM7Zu

<div class="col-lg">
<div class="col-lg">

<div class="col-lg">

<div class="col-lg">

<div class="col-lg">

I have a little web app that I want to show 5 columns responsive equal width.

But I only want this layout for a devices with ≥992px of width. For devices <992px of width I want to show the 5 HTML elements in one full-width row.

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border.

Two workarounds have been documented in a reduced test case outside Bootstrap, though if the browser is up to date this shouldn’t be necessary.

Source: https://getbootstrap.com/docs/4.0/layout/grid/

So, I'm a bit confused in how can I achieve this responsive behaviour that I want using Bootstrap 4.

I have this "idea", but I think will pretty ugly, what do you think about it?

Let's consider this markup

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
  </div>
</div>

Then, with jQuery I can select .sep and add bootstrap4 class w-100 in the case of width <992px.

Thanks for reading and please forgive my bad english.

解决方案

Maybe I don't understand the question. Why not just use the lg auto layout columns (col-lg)?

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>

这篇关于Bootstrap 4 上的非 12 分等列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆