बूटस्ट्रैप में पृष्ठ पर अंक लगाना

Question

मेरे पास पेजिनेशन में यह कोड है

<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उन्होंने काम नहीं किया।

Comments

बूटस्ट्रैप 3 के साथ, आपको <ul class="pagination">...</ul>अंदर को लपेटना होगा <div class="text-center"></div>।

— caw

बूटस्ट्रैप के कई संस्करण हैं ... यह उपयोगी होगा यदि आप उल्लेख कर सकते हैं कि आप किस विशिष्ट संस्करण का उपयोग कर रहे हैं।

— तारिकुल इस्लाम

Answer 1

बूटस्ट्रैप ने 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>

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/

---

या यदि आप बूटस्ट्रैप की कक्षा का उपयोग करना चाहते हैं:

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

Comments

@Praveen .pagination केंद्रित को बूटस्ट्रैप 3 में हटा दिया गया था, इसके बजाय .text-center का उपयोग करें। मेरे से कोई डाउनवोट नहीं, हालांकि: पी

— केविन सी।

मुझे नहीं पता कि ड्राइव-डाउन डाउनवॉटिंग कब शांत हो गई, लेकिन आपके लिए मेरा पहला जवाब काम करता है।

— डेविड हारबेज

बूटस्ट्रैप 4 होना चाहिए<div class='d-flex'><ul class='pagination mx-auto'>...

— Lysergia25

<ul class="pagination pagination-lg justify-content-center">...कृपया समाधान में जोड़ें । getbootstrap.com/docs/4.1/components/pagination/#alignment

— Денис

वर्तमान में स्वीकृत उत्तर गलत है। यह स्पष्ट रूप से कुछ बिंदु पर सही था, लेकिन अब यह गलत है, कम से कम बीएस 4.x के लिए। सही उत्तर अब उल में औचित्य-सामग्री-केंद्र को जोड़ना है: <ul class = "

— pagination

Answer 2

बूटस्ट्रैप 3.0 और 2.3.2, दोनों के लिए, सेंटर पेजिंग के लिए, .text- सेंटर क्लास युक्त डिव में लगाया जा सकता है ।

नोट: जहां आवेदन करना है। मार्कअप में .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/

बूटस्ट्रैप 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>

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

Comments

बूटस्ट्रैप को भी यह दस्तावेज करना चाहिए।

— रेनस

Answer 3

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 अधिक जानकारी के लिए।

Comments

इसका उत्तर होना चाहिए

— nam आवाज

Answer 4

बूटस्ट्रैप 4 के साथ लार्वा का उपयोग करना, जो समाधान काम करता है:

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

Comments

सिम्फनी और बूटस्ट्रैप 4 का उपयोग करना, काम करना भी! धन्यवाद !

— रौबी

Answer 5

बूटस्ट्रैप 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>

Answer 6

बूटस्ट्रैप 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>

Answer 7

आप अपना कस्टम Css जोड़ सकते हैं:

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

धन्यवाद

Answer 8

यह, यह मेरे लिए काम किया:

शैली :

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

.pagination li {
  display: block;
 }

और ब्लेड :

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

Comments

आपकी पहली परिभाषा की सेटिंग्स का उपयोग करते हुए, मैंने नीचे की कक्षा बनाई और इसे रैपिंग डिव से जोड़ा, जो कि मेरे पृष्ठांकन के ऊपर है, मेरे लिए चाल चली। .cs-list-paginator { display: flex; justify-content: center; }

— cdsaenz 17

Answer 9

इससे मेरा काम बनता है:

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

Answer 10

V4.0.0-अल्फा.6 में:

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

Answer 11

बूटस्ट्रैप 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> 

Answer 12

मैं बूटस्ट्रैप 4 अल्फा 6 के साथ काम करने के लिए किसी भी प्रस्तावित समाधान को प्राप्त नहीं कर सका, लेकिन निम्नलिखित भिन्नता ने आखिरकार मुझे एक केंद्रित पेजिंग बार मिला।

सीएसएस ओवरराइड:

.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 पर या वर्ग काम करने के लिए लग रहा था।

Answer 13

यह सीएसएस मेरे लिए काम करता है:

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

Answer 14

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>

Comments

कस्टम क्लास की कोई आवश्यकता नहीं है जब बूटस्ट्रैप में हेल्पर्स होते हैं जो समस्या को हल करेंगे।

— कैम टुल्लोस