Центрирование страниц в bootstrap
у меня есть этот код на странице
<div class="pagination">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
но мой ul
выравнивается по левому краю. Есть ли способ центрировать ul
wrt div
?
пробовал margin: auto auto
и margin :0 auto
но они не работают.
13 ответов
Bootstrap добавил новый класс от 3.0.
<div class="text-center">
<ul class="pagination">
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
Bootstrap 4 имеет новый класс
<div class="text-xs-center">
<ul class="pagination">
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
для 2.3.2
<div class="pagination text-center">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
дать таким образом:
.pagination {text-align: center;}
это работает, потому что ul
использует inline-block;
Скрипка:http://jsfiddle.net/praveenscience/5L8fu/
или если вы хотите использовать Bootstrap класс:
<div class="pagination pagination-centered">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
Скрипка:http://jsfiddle.net/praveenscience/5L8fu/1/
для обоих Bootstrap 3.0 и 2.3.2, чтобы центрировать разбиение на страницы,.text-center класс может быть применен к содержащей div.
Примечание: когда применять .пагинация класс в разметке изменился между Bootstrap 2.3.2 и 3.0. См. ниже или прочитайте документы Bootstrap при разбиении на страницы:Bootstrap 3.0, Bootstrap 2.3.2.
Bootstrap 3 Пример
<div class="text-center">
<ul class="pagination">
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
http://jsfiddle.net/mynameiswilson/eYNMu/
Bootstrap 2.3.2 Пример
<div class="pagination text-center">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
к центру страниц в BS4, должны добавить justify-content-center
на ul
:
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
посмотреть Разбиение На Страницы Загрузки 4 для получения дополнительной информации.
ранее упомянутые решения для Bootstrap 3.0 не работали для меня на 3.1.1. Класс разбиения на страницы имеет display:block
и <li>
элементы float:left
, что означает просто обертывание <ul>
на не работает. Я не имею понятия как и когда все изменилось между 3.0 и 3.1.1. Во всяком случае, я должен был сделать <ul>
использовать . Вот код:
<div class="text-center">
<ul class="pagination" style="display:inline-block">
<li><a href="...">...</a></li>
</ul>
</div>
или для более чистой установки, опустите style
атрибут и поместите его в таблицу стилей вместо этого:
<style>
.pagination {
display: inline-block;
}
</style>
а затем используйте ранее предложенную разметку:
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>
это работает для меня:
<div class="text-center">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
использование laravel с bootstrap 4, решение, которое сработало:
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>
в V4.0.0-Альфа.6:
<div class="text-center text-sm-right">
<ul class="pagination d-inline-flex">...</ul>
</div>
это это, это сработало для меня:
стиль:
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
display: block;
}
и лезвие:
<div class="pagination">
{{ $myCollection->render() }}
</div>
Я не мог получить ни одного из предложенных решений для работы с Bootstrap 4 alpha 6, но следующий вариант, наконец, получил мне центрированную панель разбиения на страницы.
переопределение CSS:
.pagination {
display: inline-flex;
margin: 0 auto;
}
HTML-код:
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>
никакой другой комбинации display
, margin
или класс по упаковке div, казалось, работал.
этот css работает для меня:
.dataTables_paginate {
float: none !important;
text-align: center !important;
}
решение для Bootstrap 4
Вы можете использовать его
трассы
используйте этот класс justify-content-center
изменить выравнивание пагинации компонентов с модель Flexbox коммунальные услуги.
и узнать больше об этом пагинации
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
You can use the below code to center pagination
.pagination-centered {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination-centered">
<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>