-3

Site Exibido no computador:

inserir a descrição da imagem aqui

Site exibido no celular:

inserir a descrição da imagem aqui

Segue 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>

7
  • 1
    Cara coloca seu código na pergunta, só as imagens não ajudam a te responder 28/03/2020 às 18:01
  • Feito. Ta lá o cod. 28/03/2020 às 18:04
  • Inseri da forma correta agora. 28/03/2020 às 18:08
  • Mas qual é o problema?
    – LeAndrade
    28/03/2020 às 18:18
  • Queria colocar o OK na frente do BUSCAR. Ou senão alinhar ele abaixo do buscar. Veja como ficou desconfigurado. 28/03/2020 às 18:25

3 Respostas 3

1

Seu menu só é expandido em lg (navbar-expand-lg), correto? Então você pode só colocar a margem ml-4 no input quando o viewport for lg. Em vez de ml-4, use ml-lg-4:

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

Isso foi uma coisa, agora vamos ao principal:

Para evitar que o botão vá pra uma nova linha, basta colocar a classe nativa do Bootstrap .flex-nowrap no form:

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

Problema resolvido e com bônus do lance da margem. ;)

Veja:

<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>

2
  • Me brother, ficou simplesmente perfeito. Muito Obrigado. Que fórum dá hora. Gostei demais. 29/03/2020 às 13:36
  • Valeu! Saiba como agradecer no tour. Abs!
    – Sam
    29/03/2020 às 14:24
-1

na tag onde está inserido o input vc pode inserir flex-nowrap que o problema é solucionado. Atente tbm para o tamanho das colunas e até margem que pode ser grande demais para o necessário para comportar o input. Teste colocando o 'ml' quando a tela estiver em 'md'. Que é o tamanho para telas médias e grandes 'lg' (para celulares com display HD).

-3

Verifique se no seu site existe a tag abaixo:

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

1
  • Tem sim. <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> <title>Marcos Briseno - Livros</title> 28/03/2020 às 18:01

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .