বুটস্ট্র্যাপে পৃষ্ঠাগুলি কেন্দ্রিক করা

Question 1

আমার এই পৃষ্ঠাটি পৃষ্ঠাতে রয়েছে

<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কব্জিটি কেন্দ্র করার কোনও উপায় আছে কি div?

আমি চেষ্টা করেছি margin: auto autoএবং margin :0 autoতারা কাজ করে নি।

Question 2

বুটস্ট্র্যাপ 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>

বুটস্ট্র্যাপ 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>

২.৩.২ এর জন্য

<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/praveens জ্ঞ/5 L8fu/

~~বা আপনি যদি বুটস্ট্র্যাপের ক্লাসটি ব্যবহার করতে চান:~~

<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/praveens জ্ঞ/5 L8fu/1/

Question 3

উভয় বুটস্ট্র্যাপ 3.0 এবং 2.3.2 জন্য কেন্দ্র পত্রাঙ্কন চাই, .text কেন্দ্র বর্গ ধারণকারী প্রয়োগ করা যেতে পারে DIV আছে ।

দ্রষ্টব্য: মার্কআপে .pagination ক্লাসটি কোথায় প্রয়োগ করবেন বুটস্ট্র্যাপ 2.3.2 এবং 3.0 এর মধ্যে পরিবর্তিত হয়েছে। নিচে দেখুন, অথবা পত্রাঙ্কন উপর বুটস্ট্র্যাপ ডক্স পড়ুন: বুটস্ট্র্যাপ 3.0 , বুটস্ট্র্যাপ 2.3.2 ।

বুটস্ট্র্যাপ 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/

বুটস্ট্র্যাপ ২.৩.২ উদাহরণ

<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>

http://jsfiddle.net/mynameiswilson/84X3M/

Question 4

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>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

স্নিপেট প্রসারিত করুন

আরও তথ্যের জন্য পৃষ্ঠা পৃষ্ঠা বুটস্ট্র্যাপ 4 দেখুন ।

Question 5

বুটস্ট্র্যাপ 4 দিয়ে লারাভেল ব্যবহার করে, সমাধানটি কার্যকর:

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>

Question 6

বুটস্ট্র্যাপ 4 এর সমাধান

আপনি এটি ব্যবহার করতে পারেন এই শ্রেণীর প্রান্তিককরণ ব্যবহার করুনjustify-content-center

ফ্লেক্সবক্স ইউটিলিটিগুলি সহ পৃষ্ঠাগুলি উপাদানগুলির সারিবদ্ধকরণ পরিবর্তন করুন ।

এবং এটির পৃষ্ঠা সম্পর্কে আরও জানুন

<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>

স্নিপেট প্রসারিত করুন

Question 7

বুটস্ট্র্যাপ 3.0 এর জন্য পূর্বে উল্লিখিত সমাধানগুলি আমার জন্য 3.1.1 তে কার্যকর হয়নি। পৃষ্ঠাগুলি শ্রেণীর রয়েছে display:blockএবং <li>উপাদানগুলির রয়েছে float:left, যার অর্থ নিছক একার <ul>মধ্যে মোড়ানো text-centerকাজ করে না। 3.0 এবং 3.1.1 এর মধ্যে কীভাবে বা কখন জিনিসগুলি পরিবর্তিত হয়েছে সে সম্পর্কে আমার কোনও ধারণা নেই। যাইহোক, পরিবর্তে আমি <ul>ব্যবহার করেছিলাম display:inline-block। কোডটি এখানে:

<div class="text-center">
    <ul class="pagination" style="display: inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

বা ক্লিনার সেটআপের জন্য, styleবৈশিষ্ট্যটি বাদ দিন এবং তার পরিবর্তে এটি আপনার স্টাইলশীটে রাখুন:

.pagination {
    display: inline-block;
}

এবং তারপরে পূর্বে প্রস্তাবিত মার্কআপটি ব্যবহার করুন:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>

Question 8

আপনি আপনার কাস্টম সিএসএস যুক্ত করতে পারেন:

.pagination{
    display:table;
    margin:0 auto;
}

ধন্যবাদ

Question 9

এটি, এটি আমার পক্ষে কাজ করেছে:

স্টাইল :

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

এবং ফলক :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>

Question 10

এটা আমার জন্য কাজ করে:

<div class="text-center">
<ul class="pagination pagination-lg">
   <li>
  <a href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</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">&raquo;</span>
  </a>
</li>
</ul>

Question 11

V4.0.0-alpha.6 এ:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>

Question 12

বুটস্ট্র্যাপ 4:

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Question 13

বুটস্ট্র্যাপ 4 আলফা 6 এর সাথে কাজ করার প্রস্তাবিত সমাধানগুলির মধ্যে আমি কোনও পাইনি, তবে নীচের ভিন্নতাটি শেষ পর্যন্ত আমাকে একটি কেন্দ্রিক পৃষ্ঠাগুলি দণ্ড পেয়েছে।

সিএসএস ওভাররাইড:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

এইচটিএমএল:

<div class="text-center">
  <ul class="pagination">
    <li><a href="...">...</a></li>
  </ul>
</div>

এর অন্য কোনো সমন্বয় display, marginমোড়ানো DIV নেভিগেশন বা বর্গ কাজ করলো।

Question 14

এই CSS আমার জন্য কাজ করে:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}

Question 15

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>

স্নিপেট প্রসারিত করুন