बूटस्ट्रैप पुल-दाएं

Question

Bootstrap3 का उपयोग करके यहां सरल प्रश्न के रूप में काम नहीं कर रहा है। मैं एक छोटा सा फ़िल्टर बनाना चाहता था जो नीचे दिए गए पेज को पुनः लोड करता है। मेरी आवश्यकता को इस फ़िल्टर (दो इनपुट और एक छोटा बटन) को संरेखित सामग्री के साथ संरेखित करने के लिए को सही स्थिति में पर संरेखित करना था।

मैंने pull-right कक्षा का उपयोग करने की कोशिश की और वास्तव में यह फ़िल्टर को सही खींच लिया लेकिन भरने के लिए और भी अधिक जगह है। यदि आप नीचे दिए गए उदाहरण की जांच करते हैं, तो आप देखेंगे कि मेरा उद्देश्य बैंगनी पंक्ति के दाईं ओर बटन को संरेखित करना है, लेकिन यह विफल हो जाता है।

मुझे वास्तव में समझ में नहीं आता कि ऐसा क्यों होता है, लेकिन मुझे लगता है कि यह पंक्तियों के साथ कुछ मार्जिन/पैडिंग मुद्दों से संबंधित है .. मुझे यह बताते हुए एक जवाब मिल रहा है कि ऐसा क्यों होता है इसलिए मैं समस्या को समझ सकता हूं और जीता फिर से इसके साथ सौदा नहीं है :)।

तुम मेरी मार्कअप by clicking here on bootply

जाँच भी मैं यहीं मेरी मार्कअप पोस्ट करेंगे कर सकते हैं:

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
    <div class="col-xs-12"> 
    <form role="form" class="form-horizontal"> 
      <div class="form-group pull-right"> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 
     </form> 
     </div><!-- main col 12--> 
    </div><!--row--> 
    <div class="row" style="background:slategrey; height:200px;"> 
    </div> 
</div> 

Answer 1

आपका फार्म समूह संभव के रूप में सही करने के लिए जहाँ तक गठबंधन है की कोशिश करो - लेकिन यह भीतर सामग्री नहीं है। आपके पास केवल 4 + 4 + 2 चौड़े कॉलम हैं, इसलिए आप बूटस्ट्रैप द्वारा उपयोग किए गए 12-कॉलम ग्रिड में "दो कॉलम शॉर्ट" हैं।

col-xs-offset-2 कक्षा जोड़कर आप केवल 2 में से किसी एक को ऑफ़सेट करना चाहते हैं - तो संरेखण जो आप प्राप्त करना चाहते हैं उसके करीब होना चाहिए।

Answer 2

बूटस्ट्रैप कॉलम लेआउट मूल रूप से 12 कॉलम में पंक्ति विभाजित कर देगा। यहां आप केवल बारह स्तंभों में से 10 को परिभाषित कर रहे हैं, यही कारण है कि आपके पास दाईं ओर स्थान छोड़ा गया है।

<div class="form-group pull-right"> 
       <div class="col-xs-4 col-xs-offset-2"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 

Answer 3

बूटस्ट्रैप एक 12 स्तंभ ग्रिड उपयोग करता है:

http://getbootstrap.com/css/#grid (वर्थ पढ़ने)

यकीन है कि आप इस सफेद स्थान आप के रूप में मैं देख सकता हूँ स्तंभों का इस्तेमाल करते रहने की जरूरत है की जरूरत नहीं है बनाने के लिए आप नहीं कर रहे

यहाँ कैसे मैं अपने कोड करना होगा है:

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
     <div class="col-xs-12"> 
      <form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
          <button type="submit" class="btn btn-success"> 
           <span class="glyphicon glyphicon-refresh"></span> 
          </button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 4

उन लोगों के लिए जो bootstrap4 उपयोग कर रहे हैं:

उत्तरदायी फ्लोट्स के लिए कक्षाएं और हटाए गए। पुल-बाएं और। पुल-दाएं क्योंकि वे .float-left और .float-right के लिए अनावश्यक हैं।

Bootstrap4 प्रवास नोटों से अधिक जानकारी: Here