बूटस्ट्रैप 4 में मॉडल फ़ूटर बटन को बाएं और दाएं संरेखित करें

Question

बूटस्ट्रैप 4 इसके मोडल फ़ूटर के लिए फ्लेक्स-बॉक्स का उपयोग करता है। अगर मुझे दो बटन चाहिए, बाएं ओर एक और दाईं ओर एक, मैं इसे ठीक से काम करने के लिए कैसे प्राप्त करूं?

नीचे दिया गया कोड div.rowcol-sm-6 के साथ उपयोग करने का प्रयास करता है लेकिन काम नहीं करता है।

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <div class="row"> 
 
     <div class="col-sm-6 text-left"> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
     <div class="col-sm-6 text-right"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

अब जब कि modal-footer "प्रदर्शन: फ्लेक्स" है बूटस्ट्रैप 4 में, यह ऑटो मार्जिन का उपयोग करने के लिए सबसे आसान होगा। बाएं बटन पर mr-auto का उपयोग करें।

<div class="modal-footer"> 
    <button type="button" class="btn btn-primary mr-auto">Save changes</button> 
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
</div> 

Demo

यह भी देखें: Left align and right align within div in Bootstrap

Answer 2

एक ही तरीका है यह IE में काम करता है w-100 उपयोग कर रहा है। एमएक्स-ऑटो और एमआर और एमएल-ऑटो सभी युक्त तत्व से बटन बहते प्रतीत होते हैं।

<div class="modal-footer"> 
    <div class="w-100"> 
    <button type="button" class="btn btn-default">Cancel</button> 
    <button type="button" class="btn btn-primary float-right">Save</button> 
    </div> 
</div> 

Answer 3

यह आसान है और मुझे

<div class="modal-footer"> 
<button id="pagePrintBtn" type="button" class="btn btn-primary" style= "float: left;">Print</button> 
</div> 

Answer 4

<div class="modal-footer justify-content-start"> 
        <input type="hidden" value="" name=""> 
        <button id="pagePrintBtn" type="button" class="btn btn-primary">Print</button> 
        <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Delete</button> 
        <button type="button" class="btn btn-primary" id=asd>Save</button> 
       </div> 

Answer 5

modal-footerdisplay:flex; है मदद की। इसलिए अपने तत्वों को संरेखित करने का बेहतर तरीका (उदा। बटन) फ्लेक्स नियमों का उपयोग करके है। बूटस्ट्रैप 4 उन फ्लेक्स नियमों को संशोधित करने के लिए नई उपयोगिता कक्षाएं प्रदान करता है (उदा। .justify-content-[modifier])। तो मुझे लगता है एक बेहतर विकल्प के रूप में निम्नानुसार होना चाहिए:

<div class="modal-footer justify-content-between"> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
</div> 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer justify-content-between"> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>