बटन और पेजिनेशन के बूटस्ट्रैप संरेखण

Question

मैं अपनी नई वेबसाइट बनाने के लिए ट्विटर बूटस्ट्रैप 3 का उपयोग कर रहा हूं। मैं बाईं तरफ एक बटन और दाईं तरफ एक पेजिनेशन रखना चाहता हूं।

<button type="button" class="btn btn-default pull-left">Default</button> 

<ul class="pagination pull-right"> 
    <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
</ul> 

मेरे समस्या यह है कि मैं दोनों तत्वों को ठीक से संरेखित करने में असमर्थ हूँ:

http://bootply.com/91723

पृष्ठांकन एक छोटे से ऑफसेट है।

मैं ऑफसेट को हटाने के लिए क्या कर सकता हूं?

.pagination { 
margin: 0px !important; 
} 

Answer 1

जोड़ने का प्रयास करें चौथाई:

Answer 2

उल तत्व में नीचे स्टाइल रखो या यह आपके बटन और सीएसएस पर:

.add-top-margin { 
    margin-top: 20px; 
} 

इसके अलावा मैं गूगलिंग की सिफारिश करता हूं और फ़ायरफ़ॉक्स के लिए क्रोम डेवलपर टूल्स या फ़ायरबग का उपयोग करने के लिए कुछ शुरुआती ट्यूटोरियल पढ़ता हूं, खासकर यदि आप भविष्य में अधिक HTML/वेब विकास करने जा रहे हैं :-)।

Answer 3

अपने उल और अपने सीएसएस में इस वर्ग को जोड़ने:

.no-top-margin { 
    margin-top: 0; 
} 

-:

<ul style="margin-top:0;" class="pagination pull-right"> 

Answer 4

आप इसे एक तालिका में डाल सकते हैं & फिर मार्जिन टॉप लागू करें।

<table> 
<tr> 
    <td> 
     <button type="button" class="btn btn-default pull-left"> 
      Default</button> 
    </td> 
    <td> 
     <ul class="pagination pull-right"> 
      <li><a href="#">&laquo;</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="#">&raquo;</a></li> 
     </ul> 
    </td> 
</tr> 

Answer 5

आप पृष्ठ पर यह केंद्र के लिए एक चौड़ाई और उपयोग मार्जिन सेट कर सकते हैं।

<button type="button" class="btn btn-default pull-left">Default</button> 

      <ul class="pagination pull-right"> 
       <li><a href="#">«</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="#">»</a></li> 
      </ul> 

यहाँ सीएसएस है:: इसके अलावा इस समाधान के लिए ध्यान दें कि आप ul

यहाँ से .pull-right हटाने के लिए काम करने के लिए HTML है

.pagination { 
    display: block; 
    width: 232px; 
    margin: 0 auto; 
    background: #ccc; 
} 

Answer 6

लपेटें चारों ओर एक अर्थ वर्णनात्मक वर्ग अपने बटन और पेजिनेशन, जैसे कि .विगेशन-बार और इसका उपयोग .pagination पर मार्जिन को लक्षित करने के लिए करें:

.navigation-bar .pagination { 
     margin-top: 0; 
    } 

http://bootply.com/91736

आप सीधे एक रूपरेखा वर्ग को ओवरराइड कभी नहीं करना चाहिए, के रूप में यह अपने पूरे कोड बेस भर में लागू होगा। विकल्प बस विस्तार करने के लिए है।पृष्ठांकन वर्ग:

<ul class="pagination no-margin pull-right"> 

Answer 7

मैं के लिए जाना होगा:

<div class="btn-toolbar" role="toolbar" style="margin: 0;"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-default">1</button> 
     <button type="button" class="btn btn-default">2</button> 
     </div> 

     <div class="btn-group pull-right"> 
       <ul class="pagination" style="margin: 0;"> 
       <li><a href="#">«</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="#">»</a></li> 
      </ul> 
     </div> 
    </div> 

http://www.bootply.com/116457

अगर आप बटन के साथ <ul><li.... की जगह, आप यहाँ style="margin: 0;

उदाहरण उपयोग की जरूरत नहीं: http://getbootstrap.com/components/#btn-groups-toolbar

Answer 8

`<div class="pagination justify-content-center pagination-large" id="pagination-demo">     

`

का औचित्य साबित जो सामग्री पर केंद्र केंद्र के लिए