如何将用VUE创建的分页栏居中？
我发现下面的分页是用Vue实现的。我想将分页栏水平居中。我尝试了不同的方法（将class=“text-center”和style=“text-align：center！importance；”添加到nav和v-pagination标记），但都不奏效。有什么办法可以解决吗？
CodePen中的代码：
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
共有2个答案
null
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<div class="row text-center">
<div class="col">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
使用flexbox，将此样式添加到“.Pagination”类：
.pagination {
display: flex;
justify-content: center;
}
-
我希望能够处理从必须在页面中访问的源读取的java流。作为第一种方法，我实现了一个分页迭代器，它在当前页面用尽条目时简单地请求页面，然后使用< code > stream support . stream(iterator，false)获取迭代器上的流句柄。 因为我发现获取我的页面非常昂贵，所以我想通过并行流的方式访问页面。此时，我发现由于java直接从迭代器提供的spliterator实现，我的
-
我试图得到分页从材料UI，但我想中心的箭头和页数的按钮。 我试图通过创建
-
我读到DB2不支持限制和偏移量。我还读到您必须使用ROW_NUMBER()和子查询来获得所需的结果。如果这是SQL查询： 其中$offset是偏移量，$rowserPage是我希望在页面上显示的数据库行的数量，这可以等效为DB2查询。
-
嘿，伙计们，我正在制作这个游戏，我想知道如何在右边制作另一个专栏。你会从视觉上更好地理解： 这就是我现在做的： 但是如果我再加一个按钮，它就会垂直向下。我如何使它水平到中间，这样我就可以使我的井字游戏。 代码：
-
问题内容： 我的应用程序中有一个工具栏，例如： 我将标题添加为： 我已经读过Android工具栏中心标题和自定义字体 但是，如果我更改工具栏的xml，我不知道如何更改TextView的值。有人可以帮助我吗？ 问题答案： 如果您具有自定义的工具栏布局，请不要用于设置标题。 相反，假设您的XML布局如下所示： 你需要调用，在某处你的可能是：
-
问题内容： 我正在尝试在javafx中创建自定义工具栏。该工具栏应该能够在其表面的中心，左侧和右侧（三个部分）显示控件。问题是我不知道要实现这一目标。我阅读了许多与此问题相关的提示，但它们对我不起作用，或者我做错了事… 无论如何，我写了几种方法，它们代表了实现工具栏的不同方法，但它们均无法正常工作。这是您的尝试： 使用HBox的Hgrow属性作为spring。没用 2.它适用于左右部分，但是如何定