Not working class form-inline in Bootstrap 4. What's wrong with the layout?

Trying to do navbar horizontal form. In the documentation of Bootstrap 4 shows that it is possible to use the class form-inline I'm trying to, but it does not work, the form always takes a vertical look. I would like to solve the problem by means of bootstrap and understand why it is not working as it should.
the <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top shadow-sm">
 <a class="navbar-brand" href="#">Test</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <!--<div class="navbar-nav">
 <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
 <a class="nav-item nav-link" href="#">Page</a>
</div>-->
 <form class="form-inline">
 <input type="text" readonly class="form-control-plaintext text-white" value="Ivan Ivanov">
 <button type="submit" class="btn btn-outline-light">Exit</button>
</form>
</div>
</nav>
</body>
March 19th 20 at 08:29
2 answers
March 19th 20 at 08:31
Solution
Wrapped input and button in div's and became as it was necessary
March 19th 20 at 08:33
form-control-plaintext ?
Yes, indeed it is a problem, but I need a text field with no part of it - Tara85 commented on March 19th 20 at 08:36
@Tara85,
use the .form-control-plaintext class to remove the default form field styling
as be intimated to you)
bootstrap is just a set of typical elements, it does not solve all the problems.
suggest to learn sass and collect bootrap with the addition of their classes from source codeto Assembly, you can use koala, everything is simple and convenient.
if the elements without border found at a few places that make generic classes Ala.border-none { border: 0; }
if once, it is easier to specify the border properties for this element:
.header-menu { border: 0; } - meghan_Koz commented on March 19th 20 at 08:39

Find more questions by tags Web DevelopmentBootstrapHTMLCSS