When displaying the site on mobile, the input with Submit defaults. How to solve ? I am using bootstrap 4

Asked

Viewed 62 times

-3

Site Displayed on the computer:

inserir a descrição da imagem aqui

Site displayed on mobile:

inserir a descrição da imagem aqui

Follows Cod:

<!DOCTYPE HTML>
 <html lang="pt-br">
<head>
    <meta charset="utf-8"/>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<title>Marcos Briseno - Livros</title>
	
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
</head>
<body>
	 
	    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<div class="container">
			<a class="navbar-brand" href="#">Curso</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSite">


				<ul class=" navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="#">Inicio</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Perfil</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Serviços </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Depoimentos</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contatos</a>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="navDrop">
							Social
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Facebook</a>
							<a class="dropdown-item" href="#">Twitter</a>
							<a class="dropdown-item" href="#">Instagram</a>
						</div>

					</li>

				</ul>
				<form class="form-inline">
					<input class="form-control ml-4 mr-2 " type="search" placeholder="Buscar...">
					<button class="btn-inline btn-dark" type="submit">OK</button>
				</form>
			</div>
		</div>
			
	       
	    </nav>
	

	<section>
	    <article>
	        <header>
	            <h2>O título do artigo é aqui</h2>
	            <p>Publicado em <time datetime="2015-03-09T13:00:24+01:00">09 de Março de 2015</time> por <a href="#">Author</a> - <a href="#comments">30 comentários</a></p>
	        </header>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	    </article>

	    <article>
	        <header>
	            <h2>O título do artigo é aqui</h2>
	            <p>Publicado em <time datetime="2015-03-09T13:00:24+01:00">09 de Março de 2015</time> por <a href="#">Author</a> - <a href="#comments">15 comentários</a></p>
	        </header>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	    </article>
	</section>

	<aside>
	    <h2>Entre em contato</h2>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</aside>

	<footer>
	    <p>Copyright 2015 Código Fonte©</p>
	</footer>
</body>
</html>

bootstrap-4
  • 1

    Guy puts his code on the question, only the pictures don’t help you answer

  • Done. Ta there Cod.

  • I inserted it right now.

  • But what’s the problem?

  • I wanted to put the OK in front of the SEARCH. Or to align it below the search. See how it was disfigured.

  • Beside I believe it is not possible, if you see in the Bootstrap site itself in navigation bars, if you decrease the screen you will see that the button goes down the input, now, to align it under the input, just remove the margins that put mr-2 in the input.

  • Fico massa Leandrade.

Show 2 more comments

3 answers

1


Your menu is only expanded on lg (navbar-expand-lg), correct? Then you can just put the margin ml-4 input when the viewport is lg. Instead of ml-4, use ml-lg-4:

<input class="form-control ml-lg-4 mr-2 " type="search" placeholder="Buscar...">

That was one thing, now let’s get to the point:

To prevent the button from moving to a new line, simply place the native Bootstrap class .flex-nowrap in the form:

<form class="form-inline flex-nowrap">

Problem solved and with margin bid bonus. ;)

Behold:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
      <a class="navbar-brand" href="#">Curso</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
         <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSite">


         <ul class=" navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link" href="#">Inicio</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Perfil</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Serviços </a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Depoimentos</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contatos</a>
            </li>
         </ul>
         <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="navDrop">
                  Social
               </a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Facebook</a>
                  <a class="dropdown-item" href="#">Twitter</a>
                  <a class="dropdown-item" href="#">Instagram</a>
               </div>

            </li>

         </ul>
         <form class="form-inline flex-nowrap">
            <input class="form-control ml-lg-4 mr-2 " type="search" placeholder="Buscar...">
            <button class="btn-inline btn-dark" type="submit">OK</button>
         </form>
      </div>
   </div>
      
       
    </nav>


<section>
    <article>
        <header>
            <h2>O título do artigo é aqui</h2>
            <p>Publicado em <time datetime="2015-03-09T13:00:24+01:00">09 de Março de 2015</time> por <a href="#">Author</a> - <a href="#comments">30 comentários</a></p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </article>

    <article>
        <header>
            <h2>O título do artigo é aqui</h2>
            <p>Publicado em <time datetime="2015-03-09T13:00:24+01:00">09 de Março de 2015</time> por <a href="#">Author</a> - <a href="#comments">15 comentários</a></p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </article>
</section>

<aside>
    <h2>Entre em contato</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>

<footer>
    <p>Copyright 2015 Código Fonte©</p>
</footer>

  • Me brother, it was just perfect. Thank you very much. What an hour forum. I liked it so much.

  • Thanks! Learn how to thank on [tour]. Abs!

-1

in the tag where the input is inserted you can insert flex-nowrap that the problem is solved. Watch tbm for the size of the columns and even margin that may be too large for the necessary to handle the input. Test by placing 'ml' when the screen is 'Md'. That is the size for medium and large screens 'lg' (for mobile phones with HD display).

-3

Check if there is a tag on your site below:

<meta name="viewport" content="width=device-width, initial-scale=1">

  • Yes. <meta charset="utf-8"/> <meta content="width=device-width, initial-Scale=1, Maximum-Scale=1" name="viewport"> <title>Marcos Briseno - Books</title>

Browser other questions tagged bootstrap-4

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