1

Estou com problema na quebra de linhas do bootstrap. Preciso deixar minha logo, uma imagem, seguida de uma label, sem que quebre a linha. Porém, usando a classe form-control do boostrap.min.css a linha é quebrada, deixando a imagem separada da label. Se eu coloco um input normal, sem a classe do bootstrap, a linha não quebra. Tentei alterar o código css do boostrap na classe form-control, mas nada mudou. Tentei também mudar o size do input, mas também não mudou.

<form action="./InterfaceServlet" method="post" name="searchForm">
   <div class="input-group input-group">
      <img src="images/logoWiber.png" alt="WiBer" width="365" height="261">
      <input type="text" name="search" class="form-control" size="100">
      <button type="submit" class="btn btn-lg">Search it</button>
   </div>
</form>

3 Respostas 3

1

Utilize a propriedade "float: left" para deixar uma ao lado da outra. Por exemplo:

#idElemento {
 float: left;
}
1
  • Pode-se simplesmente utilizar a classe .pull-left já existente no próprio bootstrap. Saiba mais aqui
    – abfurlan
    Commented 21/10/2015 às 19:48
1

Se você está utilizando o Bootstrap, utilize o sistema de Grid, que, na minha opinião, é a melhor funcionalidade do Bootstrap.

Utilizando as grids, seu código ficaria assim:

<div class="form-group">
      <div class="col-md-2 col-sm-2 col-xs-2" id="logo">
           <label>Imagem aqui</label>
      </div>

      <div class="col-md-10 col-sm-10 col-xs-10" id="txtLogo">
          <label>Label Aqui </label>
      </div>
   </div>

#txtLogo{
    border: 1px solid;
}

#logo{
    border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group">
      <div class="col-md-2 col-sm-2 col-xs-2" id="logo">
           <label>Imagem aqui</label>
      </div>
          
      <div class="col-md-10 col-sm-10 col-xs-10" id="txtLogo">
          <label>Label Aqui </label>
      </div>
   </div>

Com o sistema de grid você consegue deixar seu site responsivo e de quebra fazer o que você quer.

Segue um exemplo no JSFiddle.

  • Não edite os arquivos css, você pode customizar os mesmos no próprio site. Em sua edição você poderá alterar alguma propriedade e impactando em outra funcionalidade.

  • Coloquei a borda no css apenas para melhor compreensão das funcionalidades.

0

Uma opção seria utilizar uma grid .row, e criar lado a lado os componentes que deseja. Para alinhar o input e o button, você também pode utilizar a classe .input-group, veja no exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <img src="http://placehold.it/100x50" class="img-responsive"  />
    </div>
    <div class="col-xs-10 ">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search..." />  
        <span class="input-group-btn">
          <button type="submit" class="btn btn-primary">
            <i class="glyphicon glyphicon-search"></i>
          </button>  
        </span>
       </div>
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

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