Position content within Navbar Bootstrap

Asked

Viewed 6,928 times

0

I am using and remodeling a navbar whose template is made by the Bootstrap site itself but after making insertions of the classes I thought able to position the objects noticed that they were not working (although many are), so here is a print of the page:

inserir a descrição da imagem aqui

my intention was to centralize the search form (includes the radio button) and put in the same level the login buttons and create Account

Code with Bootstrap:

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
                <a class="navbar-brand" href="#">Meu Site</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form" role="search">
                    <div class="form-group">
                        <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
                        <label class="radio-inline"><input type="radio" name="optradio" checked="">Option 1</label>
                        <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
                        <input class="form-control" type="text" placeholder="Search" />
                    </div>
                    <button class="btn btn-default" type="submit">Search</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><button class="btn btn-default">Login</a></li>
                    <li><button class="btn btn-default">Create Account</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>
</body>
css twitter-bootstrap

1 answer

1


I think this will help you:

<form class="navbar-form navbar-form navbar-left" role="search">

Replace the old code with the code above.

  • @Ricardohenrique On the Login and Create Account buttons use the navbar-btn class. I’m seeing the problem of the search text field and I’ll give you another answer.

  • @Ricardohenrique Add this code on the buttons: <button class="btn btn-default navbar-btn">Login</button> <button class="btn btn-default">Create Account</button>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.