बूटस्ट्रैप: एक ही पंक्ति पर दो बटन संरेखित करना

Question

मूल रूप से मैं वेबसाइट के विपरीत पक्ष पर दो बटन प्राप्त करने के लिए ऐसा करने का प्रयास कर रहा हूं लेकिन उसी पंक्ति पर।

और यहाँ मैं क्या है के लिए कोड है:: यहाँ यह क्या लग रहा है की तरह है

   <div class="panel-footer"><!-- panel-footer --> 

       <div class="previous"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
        </button> 
       </div> 

       <div class="next"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
        </button> 
       </div> 

      </div><!-- end panel-footer --> 

और यहाँ के लिए सीएसएस है वर्गों 'पिछला' और 'अगले'।

.previous { 
text-align: left; 
} 

.next { 
text-align: right; 
} 

धन्यवाद। अगर मैं मदद करता हूं तो मैं बूटस्ट्रैप का उपयोग कर रहा हूं।

Answer 1

इस तरह दो अलग-अलग कॉलम में उन्हें लपेटें:

<div class="panel-footer row"><!-- panel-footer --> 
    <div class="col-xs-6 text-left"> 
     <div class="previous"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </button> 
     </div> 
    </div> 
    <div class="col-xs-6 text-right"> 
     <div class="next"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </button> 
     </div> 
    </div> 
</div><!-- end panel-footer --> 

वैसे, आप उपयोग कर सकते हैं सहायक वर्गों में बनाया पाठ-बाएँ/पाठ सही है कि मैं स्तंभ divs पर किए गए कार्यों को आप अतिरिक्त सीएसएस जोड़ने की जरूरत नहीं है। उस स्थिति में आप जोड़े गए अतिरिक्त div को हटा सकते हैं।

Answer 2

आपको बाएं और दाएं बटन वाले divs को फ़्लोट करने की आवश्यकता है। चूंकि आप बूटस्ट्रैप का उपयोग कर रहे हैं, इसलिए मैं अनुशंसा करता हूं कि आप अंतर्निहित .pull-right और .pull-left कक्षाओं का उपयोग करें।

पिछले div को .pull-left class और अगली div पुल-दाएं वर्ग दें।

आपको अगली बटन अपने एचटीएमएल स्रोत में पहले आना पड़ सकता है।

आप बस फ्लोट जोड़ सकते हैं: बाएं; आपके मौजूदा। पूर्व वर्ग और फ्लोट के लिए: दाएं; .next कक्षा में।

अभी तक बेहतर है, बस उन पिछले/अगले divs से छुटकारा पाएं और पुल-बाएं/पुल-दाएं कक्षाओं को सीधे बटन पर लागू करें।

Answer 3

मैं अपने सीएसएस में नाव का प्रयोग करेंगे

.previous { 
float: left; 
} 

.next { 
float: right; 
} 

आप इस विकल्प का यहाँ jsfiddle परीक्षण कर सकते हैं।

Answer 4

मैंने सोचा कि बूटस्ट्रैप स्वचालित रूप से यह आपके लिए तैरता है यदि आप इसे div.row में लपेटते हैं क्योंकि यह ग्रिड पर आधारित है?

<div class="row"> 
<div class="pull-left"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </button> 
</div> 

<div class="pull-right"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </button> 
</div> 
</div> 

Answer 5

आप कोशिश कर सकते हैं क्या HaukurHaf ने कहा, यह काम करेंगे। सरल फ़्लोटिंग विधि।

या आप उन दो .previous और .next divs को .col-classesजों में भी डाल सकते हैं और फिर उन्हें पंक्ति div में लपेट सकते हैं। तो यह लिखा होगा:

<div class="panel-footer"> 
<div class="row"> 
    <div class="col-xs-6 previous"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </button> 
    </div> 
    <div class="col-xs-6 next"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </button> 
    </div> 
</div> 

इस तरह अपने बूटस्ट्रैप के कॉलम लेआउट अनुसरण कर रहे हैं। ``

...

और ``

...

: