重新排序 bootstrap 4 列
Reordering bootstrap 4 columns
我正在用 Nuxt.js 和 Vue.js 制作一个组件。该组件有一个包含 2 列的 bootstrap 网格,均为 col-6。现在我想添加一个可以对列重新排序的功能,这样我就可以将位置切换到左侧或右侧。我一直在尝试使用 bootstrap 中包含的推拉方法对它们重新排序。但我似乎无法让它工作。
这是我的代码。我真的很感激一些帮助。
代码:
<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 顺序,只需添加 class。我在第一列 div <div class="col-lg-6 col-md-12 order-2">
添加了顺序 class
见下面的代码:
<!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>
我正在用 Nuxt.js 和 Vue.js 制作一个组件。该组件有一个包含 2 列的 bootstrap 网格,均为 col-6。现在我想添加一个可以对列重新排序的功能,这样我就可以将位置切换到左侧或右侧。我一直在尝试使用 bootstrap 中包含的推拉方法对它们重新排序。但我似乎无法让它工作。
这是我的代码。我真的很感激一些帮助。
代码:
<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 顺序,只需添加 class。我在第一列 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>