javascript - Why bootstrap float-right class not working for my button? - Stack Overflow

admin管理员组

文章数量:1406063

The bootstrap float-right class did not work with my buttons.

This is my html code snippet:

<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <button type="button"
    id="reset_button"
    class="btn btn-outline-secondary btn-lg float-right"
    disabled="disabled">Reset</button>
    
  <button type="button"
    id="convert_button"
    class="btn btn-primary btn-lg float-right" 
    disabled="disabled">Submit</button>
</div>

The bootstrap float-right class did not work with my buttons.

This is my html code snippet:

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <button type="button"
    id="reset_button"
    class="btn btn-outline-secondary btn-lg float-right"
    disabled="disabled">Reset</button>
    
  <button type="button"
    id="convert_button"
    class="btn btn-primary btn-lg float-right" 
    disabled="disabled">Submit</button>
</div>

I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.

Can anyone please tell me what's wrong with my code and how can I fix this...

• javascript
• bootstrap-4
• web-deployment

Share Improve this question Follow edited Apr 10, 2022 at 14:25 Lee Taylor 7,9941616 gold badges3737 silver badges5353 bronze badges asked Apr 9, 2022 at 15:52 user18756635user18756635 1

• I edited your question embedding your code in a snippet and it shows the button aligned to the right. Something sounds wrong in what you experienced but it's difficult to say. – Diego D Commented Apr 9, 2022 at 15:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Instead of float there are probably better Bootstrap options.

Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....

<div class="container-fluid d-flex justify-content-end">
      <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
      <button type="button" id="convert_button" class="btn btn-primary btn-lg" 
       disabled="disabled">Submit</button>
</div>

The code is working for me. I just copied your snippet and buttons are on the right side.

Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.

You can also see this, when you run your snippet here.

Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't patible with the float classes.

Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.

本文标签： javascriptWhy bootstrap floatright class not working for my buttonStack Overflow