如何使用 Bootstrap 4 对列重新排序?

2023-11-27

我在 bootstrap 4 中使用了以下标签。

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3">
                <div class="right-user-account" >
                    <a href="#">User Account</a>
                </div>
            </div>

            <div class="col-md-6">
                <img src="images/logo.png">
            </div>

            <div class="col-md-3">
                <div class="left-login" >
                    <a href="#">Login</a>
                </div>
            </div>
        </div>
    </div>

enter image description here

我想要带有徽标的全角

enter image description here

如何使用重新排序命令?


Bootstrap 4 使用 flex/flexbox。所以是的,您可以选择对元素/列进行排序。

我认为你想要的是只使用 Bootstrap-4 类order-{number}和你的col类。

下面是解决方案:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row align-items-center">
  
    <div class="col-md-3 col order-2 order-sm-1">
      <div class="right-user-account">
        <a class="fd-head-login" href="#">
          <i class="fa fa-caret-down"></i>User Account</a>
      </div>
    </div>
    
    <div class="col-md-6 text-center col-md-6 order-1 order-sm-2">
      <a href="#">
        <img src="images/logo.png">
      </a>
    </div>

    <div class="col-md-3 order-3">
      <div class="left-login">
        <a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>
      </div>
    </div>
    
  </div>
</div>

你可以找到更多here.

Codepen 链接到游戏屏幕宽度

希望这个回答对您有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Bootstrap 4 对列重新排序? 的相关文章

随机推荐

  • Mono 准备好迎接黄金时段了吗? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 有人在大型或中型项目中使用过 Mono 开源 NET 实现 吗 我想知道它是否适合现实世界的生产环境 它稳定 快速 兼容 足以使用吗 将项目移植到 Mono 运行时是否需要花费很多精力 或
  • 颤动相机插件

    我对 Flutter 和 Dart 都很陌生 我正在尝试使用相机插件了解事情是如何运作的 我找到的所有示例都有这部分 List
  • Galaxy S5 上的 FOCUS_MODE_CONTINUOUS_PICTURE 出现问题

    我正在开发一个使用相机预览和拍照的 Android 应用程序 我用FOCUS MODE CONTINUOUS PICTURE使用 Galaxy S4 发现对焦效果非常好 然而 在 Galaxy S5 上FOCUS MODE CONTINUO
  • iCarousel 停在用户选择的索引处

    EDIT 我正在制作一个像老虎机一样的应用程序 我补充道iCarousel对于槽对象 所以我有一个按钮可以旋转iCarousel 在我的 iCarousel 视图中 有两个插槽 Slot1 和 Slot2 下面是我的iCarouselVie
  • 使用 mongoose 切换数据库

    您好 有没有办法用 mongoose 切换数据库 我想我可以这样做 mongoose disconnect mongoose connect localhost db 但它不起作用我收到此错误 Error Trying to open un
  • NextJS TypeError:无法读取 null 的属性(读取“长度”)

    有人知道这个错误的原因吗 warn Fast Refresh had to perform a full reload Read more https nextjs org docs basic features fast refresh
  • 如何在 Chrome 上设置音频自动播放

    音频自动播放可以在 Mozilla Microsoft Edge 和旧版 Google Chrome 中使用 但不能在由于自动播放政策发生变化 Google Chrome 67 他们已阻止自动播放 直到满足链接博客文章中指定的特定会话条件
  • 从IP地址获取子网

    我正在尝试获取我拥有的 IP 地址的子网 Eg 1 子网掩码 255 255 255 0 Input 192 178 2 55 输出 192 178 2 0 2 子网掩码 255 255 0 0 Input 192 178 2 55 输出
  • CSS 粘性标题

    我在主页上添加了一个粘性标题 但是粘性标题似乎位于页面上其余内容的后面 因此当我向下滚动页面时 图像和文本位于标题顶部 有没有办法停止这个 这是我的代码
  • 每个 HTTP/会话请求的全局数据?

    问题 有没有办法在每个会话 http 请求中创建变量存储 该变量必须是全局可访问的 并且每个 HTTP 请求 连接 会话都不同 并且不需要在函数之间传递 例如 只是为了说明 setVariableThatCanBeAccessedByThi
  • 如何在 Eclipse 中更新我的 ADT?

    我尝试过更新我的 Eclipse 目前我的 Eclipse 中已经有 2 2 Android SDK 了 昨天我更新了我的 Eclipse 如下所示 Eclipse gt 窗口 gt Android SDK Manager gt 我已选中列
  • PHP 连接两个变量名

    我有一个 php 脚本 它得到 POST决定返回哪个数组 前任 n POST n 1 2 or 3 a1 array something something else another thing a2 array something 2 s
  • 如何使用 node.js 从“AWS dynamodb”获取/扫描所有项目

    如何获取 扫描所有项目AWS dynamodb using node js 我在这里发布我的代码 var docClient new aws DynamoDB DocumentClient var params TableName user
  • 如果安装了SQL Server(标准版),如何通过代码获取服务器名称

    如果安装了SQL Server 标准版 如何通过代码获取服务器名称 我们在创建连接字符串来连接 SQL Server 时传递服务器名称 我们可以通过代码检索这个值吗 string sqlConnectionString string For
  • 如何使用 python 将 xml 文件转换为 JSON?

    我有一个 XML 文件 我想使用 python 将其转换为 JSON 文件 但它对我来说不起作用
  • 使用C#显示powerpoint

    有什么好方法使用 C 编写的 Windows 应用程序来显示 控制 powerpoint 幻灯片吗 最终 我想在表单中显示缩略图 然后单击这些缩略图将推进第二个显示器上显示的幻灯片 类似于使用 Powerpoint 本身在第二个显示器上显示
  • 3G iPhone 设备“已完成运行”,但应用程序无法加载

    我正在尝试在 3G 设备上运行应用程序 Xcode 表示该应用程序已 已完成在 iPhone 上的运行 但该应用程序不会部署 我认为我的架构配置正确 见下图 任何帮助都会很棒 thanks 我终于明白了这一点 在 Info plist 中
  • SwiftUI NavigationLink 按钮是灰色且不可触摸的

    我无法得到NavigationLink在 SwiftUI 中 该按钮是可见的 但不幸的是它是灰色的并且无法单击 这是代码 import SwiftUI import Combine struct ContentView View var b
  • 如何在flutter中截取屏幕之外的小部件的屏幕截图?

    我在用重画边界截取当前小部件的屏幕截图listView 但它只捕获当时屏幕上可见的内容 RepaintBoundary key src child ListView padding EdgeInsets only left 10 0 scr
  • 如何使用 Bootstrap 4 对列重新排序?

    我在 bootstrap 4 中使用了以下标签 div class container div class row align items center div class col md 3 div class right user acc