如何修复引导程序 4 中意外的列顺序? [英] How to fix unexpected column order in bootstrap 4?

查看：11
本文介绍了如何修复引导程序 4 中意外的列顺序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试制作如下布局:

在 xs 设备上，我希望顺序是第一-第二-第三.

我的示例代码是:

<头><meta http-equiv='Content-Type' content='text/html;字符集=UTF-8'/><link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><style type="text/css">div.short { 高度:100 像素；背景颜色:RGB(174、199、232)；}div.medium { 高度:200 像素；背景颜色:rgb(255, 187, 120);}div.tall { 高度:400 像素；背景颜色:RGB(152、223、138)；}</风格><身体><div class="容器"><div class="row"><div class="col-sm-4 short order-sm-9">第一列(短)

<div class="col-sm-8 medium order-sm-1">第二列(中)

<div class="col-sm-4 high"><p>第三列(高)</p><p>如何保持这个 <em>under</em>第一列(蓝色)当在 <code>sm</code>或更大的设备，而在<code>xs</code>上保留一二三顺序；设备?</p><p>为什么这些较窄的列在左边，而不是比对吗?</p>

</html>

发生的情况是第一列和第三列最终倒置在左侧.

解决方案

Bootstrap 4 使用 flexbox，所以列总是等高，你将无法获得您想要在更大的屏幕上的布局.解决方案是禁用 sm 及更高版本的 flexbox.使用浮动使第三个较高的列向右浮动.flexbox order- 将适用于移动设备 (xs).

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

<div class="row d-sm-block"><div class="float-left col-sm-8 medium order-2">第二列(中)
<div class="float-left col-sm-4 short order-1">第一列(短)

<div class="float-left col-sm-4 tall order-3"><p>第三列(高)</p>..

相关:
移动版本上不同顺序的引导程序
Bootstrap 4 中列之间的空白垂直空间

I'm trying to make a layout like the following:

On xs devices, I'd like the order to be first-second-third.

The sample code I have is:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
     div.short  { height: 100px; background-color: rgb(174, 199, 232); }
     div.medium { height: 200px; background-color: rgb(255, 187, 120); }
     div.tall   { height: 400px; background-color: rgb(152, 223, 138); }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 short order-sm-9">
          First column (short)
        </div>
        <div class="col-sm-8 medium order-sm-1">
          Second column (medium)
        </div>
        <div class="col-sm-4 tall">
          <p>Third column (tall)</p>
          <p>
            How to keep this <em>under</em> the first (blue) column
            when on <code>sm</code> or larger devices, while
            preserving the first-second-thrid order on <code>xs</code>
            devices?
          </p>
          <p>
            And why are these narrower columns on the left, rather
            than right?
          </p>
        </div>
      </div>
  </body>
</html>

What is happening is that the first and third columns end up upside down and on the left.

解决方案

Bootstrap 4 uses flexbox, so the columns are always going to be equal height, and you'll not be able to get the layout that you want on larger screens. The solution is to disable the flexbox for sm and up. Use floats so that the 3rd taller column floats to the right. The flexbox order- will work on mobile (xs).

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

<div class="container">
    <div class="row d-sm-block">
        <div class="float-left col-sm-8 medium order-2">
            Second column (medium)
        </div>
        <div class="float-left col-sm-4 short order-1">
            First column (short)
        </div>
        <div class="float-left col-sm-4 tall order-3">
            <p>Third column (tall)</p>
            ..
        </div>
    </div>
</div>

Related:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4

这篇关于如何修复引导程序 4 中意外的列顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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