2017-01-27 11 views
11

पर बटन संरेखित करें मुझे पता है कि यह वास्तव में सरल होना चाहिए लेकिन मैं केवल बूटस्ट्रैप 4 कक्षाओं का उपयोग कर विंडो के दाईं ओर एक बटन सेट करने का प्रयास कर रहा हूं। यह पाठ के समान पंक्ति में होना चाहिए।दाएं

<html> 
<head> 
</head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <body> 
     <div class="row"> 
      <h3 class="one">Text</h3> 
      <button class="btn btn-secondary pull-right">Button</button> 
     </div> 
    </body> 
</html> 

में here

उत्तर

21

Bootstrap 4 uses .float-right के रूप में बूटस्ट्रैप 3. इसके अलावा में .pull-right करने का विरोध किया है, ठीक से कॉलम के साथ अपने पंक्तियों घोंसला करने के लिए मत भूलना।

<div class="row"> 
    <div class="col-lg-12"> 
     <h3 class="one">Text</h3> 
     <button class="btn btn-secondary float-right">Button</button> 
    </div> 
</div> 
-3

शायद तुम नाव का उपयोग कर सकते कोड है: ठीक है,:

.one { 
 
    padding-left: 1em; 
 
    text-color: white; 
 
    display:inline; 
 
} 
 
.two { 
 
    background-color: #00ffff; 
 
} 
 
.pull-right{ 
 
    float:right; 
 
}
<html> 
 
<head> 
 
    
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <h3 class="one">Text</h3> 
 
     <button class="btn btn-secondary pull-right">Button</button> 
 
    </div> 
 
    </body> 
 
</html>

-2

सीडीएन से प्राप्त बूटस्ट्रैप 4.0.0 फ़ाइल में पुल-दाएं (या पुल-बाएं) क्लास नहीं है। V4 अल्फा में है, इसलिए इस तरह के कई मुद्दे हैं।

1) 3.3.7

2 bootstrap करने के लिए रिवर्स) अपनी खुद की सीएसएस लिखें:

2 विकल्प हैं।

+0

पहचानने के साथ बहुत तेजी से कर दिया गया। बूटस्ट्रैप 4 में पुल-दाएं (पुल-बाएं) की जगह एक फ्लोट-दाएं (फ्लोट-बाएं) कक्षाएं होती हैं। माफ़ कीजिये। –

0

आप जो भी पूछ रहे हैं उसके साथ कुछ करने के लिए आप पंक्ति और कॉलम सिस्टम का उपयोग कर सकते हैं।

पंक्ति के अंदर तीन कॉलम रखें जिसमें आपके टेक्स्ट और बटन के अंदर है। सेट वर्ग के लिए दो = "कॉल-SM-1" और वर्ग = "कॉल-SM-10" के लिए भीतरी स्तंभ

<div class="row"> 
    <div class="col-sm-1"><h3 class="one">Text</h3></div> 
    <div class="col-sm-10"></div> 
    <div class="col-sm-1"><button class="btn btn-secondary pull-right">Button</button></div> 
</div> 

यह कोई आप क्या हासिल करना चाहते हैं को प्राप्त करने का एक अच्छा तरीका भी तरह से है, लेकिन यह काम करता है (स्क्रीन आकार मानना ​​बहुत छोटा नहीं होता है)। grid system आपके वेब पेज को संरचित करने के लिए बहुत अच्छा है।

आदर्श रूप से आप पृष्ठ के दाईं ओर बटन पिन करने के लिए अपना स्वयं का सीएसएस लिखेंगे। लेकिन अगर आप ऐसा नहीं करना चाहते हैं तो यह विधि काम करेगी।

2
<div class="container-fluid"> 
    <div class="row"> 
    <h3 class="one">Text</h3> 
    <button class="btn btn-secondary ml-auto">Button</button> 
    </div> 
</div> 

.ml-auto बातें संरेखित की Bootstraph 4 की गैर-flexbox तरीका है।

0

आप नाव, यह एक ऑटो चौड़ाई कॉलम का उपयोग करके है सबसे आसान और स्पष्ट तरीका का उपयोग नहीं करना चाहते हैं:

<div class="row"> 
    <div class="col"> 
    <h3 class="one">Text</h3> 
    </div> 
    <div class="col-auto"> 
    <button class="btn btn-secondary pull-right">Button</button> 
    </div> 
</div> 
संबंधित मुद्दे