html - 重新排序引导程序 4 列
问题描述
我正在用 Nuxt.js 和 Vue.js 制作一个组件。该组件有一个带有 2 列的引导网格,均为 col-6。现在我想添加一个可以对列重新排序的功能,这样我就可以将位置切换到左侧或右侧。我一直在尝试使用引导程序中包含的推拉方法对它们进行重新排序。但我似乎无法让它工作。
这是我的代码。我真的很感激一些帮助。
代码:
<template>
<section>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-lg-6 col-md-12">
<div class="content">
<div class="text">
<h4>
{{ blok.title }}
</h4>
<p>
{{ blok.text }}
</p>
</div>
<div class="button">
<LinkType :link="blok.link" :linkText="blok.linkText">
{{ blok.linkText ? blok.linkText : 'Lees meer' }}
</LinkType>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="image" :style="{ paddingTop: getRatio }">
<img :src="blok.image"/>
</div>
</div>
</div>
</div>
</section>
解决方案
当您想更改 div 顺序时,您只需要添加类。我在第一列 div 上添加了订单类<div class="col-lg-6 col-md-12 order-2">
见下面的代码:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-lg-6 col-md-12 order-2">
<div class="content">
<div class="text">
<h4>
{{ blok.title }}
</h4>
<p>
{{ blok.text }}
</p>
</div>
<div class="button">
<LinkType :link="blok.link" :linkText="blok.linkText">
{{ blok.linkText ? blok.linkText : 'Lees meer' }}
</LinkType>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="image" :style="{ paddingTop: getRatio }">
<img :src="blok.image"/>
second box here
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
</script>
</body>
</html>
推荐阅读
- r - 将数据框转换为对称矩阵,同时保留所有行和列
- cordova - 无法安装“cordova-plugin-media-capture”:CordovaError
- android - 界面性能问题
- javascript - 无法读取测试中未定义的属性“http”-Angular 2+
- oracle11g - Dynamic sql with pivot/unpivot
- reactjs - react-google-maps:如何动态设置多个 StandaloneSearchBox 组件的 Google 容器 (.pac-container) 样式?
- excel - VBA 自动化错误:-2147221080 (800401a8)
- java - Unable to return class from REST API call
- java - Java Selenium: Switch to iframe inside shadow-root open inside webview
- laravel - 在 laravel 中获取 500 内部错误