The style for swimming directly in Bootstrap 4 does not work

Question

In this script , I see that the search box floats to the right, as intended. On my screen, this is not so. In fact, it behaves as if I placed a float-xs-left style or just left a floating related style.

You do not know how to fix the problem, since I cannot reproduce the problem. I checked everything I could on my system, but this is a navigator, a top-level component, and there is very little that can be screwed on.

<form class="form-inline float-xs-right"> <input class="form-control" type="text" placeholder="Stuff"> <button class="btn btn-default" type="button">Click</button> </form> 

I used to have a logo in a container with a class container, and it worked as intended (pushing things to the right). However, I needed to follow the line for other reasons , therefore, coming to this problem.

Anyone find out about the wrong behavior? What can I do to research further?

Answer 1

The problem is the combination of the new bootstrap grid (which is based on flex ) and the float-right you would like for the logo.

You can solve this problem using

 .navbar .row .form-inline.float-xs-right { position: absolute; right: 0; }