[off-topic] Twitter Bootstrap - Como deixar espaçamento entre os inputs menor?

2,546 views
Skip to first unread message

Fellipe Henrique

unread,
Jul 26, 2013, 9:24:29 AM7/26/13
to django...@googlegroups.com
Olá amigos, desculpe o off, mais pelo que vi, muitos aqui usam o bootstrap twitter.. Bom meu problema é nos inputs, eu preciso que fiquem um do lado do outro, com um label em cima de cada um.. vi a página e consegui fazer isso.. porém, o espaçamento entre os inputs está enorme!

Eu consigo diminuir isso?

[]s


T.·.F.·.A.·.     S+F
Fellipe Henrique P. Soares

Twitter: @fh_bash

Junior Lima

unread,
Jul 26, 2013, 10:04:49 AM7/26/13
to django...@googlegroups.com
Use o Firebug. Coloque "Inspecionar elemento" e teste outros valores.

Joelson Gai

unread,
Jul 26, 2013, 10:27:40 AM7/26/13
to django...@googlegroups.com
Use os grids do bootstrap. Um exemplo com 4 colunas.

<div class="row">
     <div class="span3">
          seu input
     </div>
     <div class="span3">
          seu input
     </div>
     <div class="span3">
          seu input
     </div>
     <div class="span3">
          seu input
     </div>
</div>


      Joelson Gai                 
        Líder de Desenvolvimento e Infraestrutura.

     


--
Você está recebendo esta mensagem porque se inscreveu no grupo "Django Brasil" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para django-brasi...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 

Fellipe Henrique

unread,
Jul 26, 2013, 10:27:35 AM7/26/13
to django...@googlegroups.com
Eu cheguei até a testar, mas cara.. é dificil viu.. Estou querendo criar uma tela de cadastro, onde tenho alguns inputs um do lado do outro, e várias linhas. é dificil casar as posições no bootstrap, ou eu não entendi como funciona.. :( Existe um jeito mais "fácil" de se montar um form com inputs lado a lado, porém com labels em cima? sem usar o form-horizontal, form-inline?

T.·.F.·.A.·.     S+F
Fellipe Henrique P. Soares

Twitter: @fh_bash


Em 26 de julho de 2013 11:04, Junior Lima <webjun...@gmail.com> escreveu:
--

Fellipe Henrique

unread,
Jul 26, 2013, 10:30:52 AM7/26/13
to django...@googlegroups.com
Então, o problema é justamente essa.. o espaço entre os inputs fica muito grande.. e não estou conseguindo diminuir eles,para que "casem" corretamente.. :(

T.·.F.·.A.·.     S+F
Fellipe Henrique P. Soares

Twitter: @fh_bash


Joelson Gai

unread,
Jul 26, 2013, 10:35:23 AM7/26/13
to django...@googlegroups.com
Você pode por em mais colunas ou coloca a classe "input-block-level" nos inputs que eles se encaixam.

Tem que ver que depende da resolução da tela, no meu pc em full hd fica enorme o espaço, mas o padrão em 1280 ou 1024 ... fica bom ... tudo depende de quem vai usar a aplicação... em um tablet fica como ... ?

E se está muito grande vc pode por mais colunas com span2 = 6 colunas...


      Joelson Gai                 
        Líder de Desenvolvimento e Infraestrutura.

     


Matheus R.

unread,
Jul 26, 2013, 11:41:16 AM7/26/13
to django...@googlegroups.com
Cara, costumo estruturar os forms dessa forma:

<form>
<div class="row-fluid">
  <div class="span12">
  <div class="span6">
<fieldset>
  <legend>Titulo do form 1</legend>
              <div class="well">
                  <div class="row-fluid">
                      <div class="span3">
<label>Label do seu campo</label>
                           <input />   
                           <span class="help-inline">{{ form.empresa.errors }}</span>
                      </div>
</div>
              </div>
         </fieldset>
      </div>
      <div class="span6">
<fieldset>
  <legend>Titulo do form 2</legend>
         </fieldset>
      </div>
   </div>
</div>
</form>

Espero que ajude!


[]'s




2013/7/26 Joelson Gai <joels...@gmail.com>

Edgar Gabaldi

unread,
Jul 26, 2013, 2:41:56 PM7/26/13
to django...@googlegroups.com

Edgar Gabaldi
Linux User: #434561

Fellipe Henrique

unread,
Jul 26, 2013, 3:19:49 PM7/26/13
to django...@googlegroups.com

Em 26 de julho de 2013 15:41, Edgar Gabaldi <edga...@gmail.com> escreveu:
Use isso.
https://github.com/tzangms/django-bootstrap-form

Não consegui usar da forma que expliquei.. preciso que os inputs fiquem lado a lado, e nao embaixo como no form, é possível com esse app?

Edgar Gabaldi

unread,
Jul 26, 2013, 4:12:07 PM7/26/13
to django...@googlegroups.com
Quando eu preciso colocar um input ao lado do outro, eu faço algo assim:


Edgar Gabaldi
Linux User: #434561


--

Christian S. Perone

unread,
Jul 26, 2013, 4:28:20 PM7/26/13
to django...@googlegroups.com
Fellipe, inputs com label em cima e um ao lado do outro: http://jsfiddle.net/nNSvP/1/


2013/7/26 Edgar Gabaldi <edga...@gmail.com>



--
"Forgive, O Lord, my little jokes on Thee, and I'll forgive Thy great big joke on me."

Fellipe Henrique

unread,
Jul 29, 2013, 7:47:37 AM7/29/13
to django...@googlegroups.com
Na verdade amigos, queria algo parecido assim:

Label1   Label2   Label3:
Input1    Input2   Input3

Label4
Input4  (....)

Até consegui, alguma coisa parecida, porém o espaço entre os inputs ou fica grande demais, ou se conseguir diminuir qnd vai pro Firefox, já era.. perde o alinhamento..

Fiz dessa forma:



[]s

T.·.F.·.A.·.     S+F
Fellipe Henrique P. Soares

Twitter: @fh_bash


Joelson Gai

unread,
Jul 29, 2013, 9:24:14 AM7/29/13
to django...@googlegroups.com
Mas que bagunça ein... tenta simplificar seu código. Veja o código fonte que está sendo passado para seu navegador, com o control + u no firefox, e use o firebug ou algo para te axilar (use f12 no chrome por exemplo).

Se usa Internet Explorer... só lamento :-P

Eu faria assim. (faço)


<div class="row-fluid">
  <div class="span4">
    {{ form.idpessoa.label_tag }}
    {{ form.idpessoa}}
  </div>
  <div class="span4">
    {{ form.razao_social.label_tag }}
    {{ form.razao_social}}
  </div>
  <div class="span4">
    {{ form.numero.label_tag }}
    {{ form.numero}}
  </div>
</div>
<div class="row-fluid">
  <div class="span4">
    {{ form.complemento.label_tag }}
    {{ form.complemento}}
  </div>
  <div class="span4">
    {{ form.razao_bairro.label_tag }}
    {{ form.razao_bairro}}
  </div>
  <div class="span4">
    {{ form.icidade.label_tag }}
    {{ form.icidade}}
  </div>
</div>

E
T
C
.
.
.



Seria bom vc usar os erros do django como:


  <div class="span4">
    {{form.idpessoa.errors}}
    {{ form.idpessoa.label_tag }}
    {{ form.idpessoa}}
  </div>
.


      Joelson Gai                 
        Líder de Desenvolvimento e Infraestrutura.

     


Fellipe Henrique

unread,
Jul 29, 2013, 10:25:01 AM7/29/13
to django...@googlegroups.com
Entendi, vou tentar aqui..

Outra coisa, vocês indicam algum theme ? Algo mais empresarial? Porque o twbootstrap está mais voltado pra users normais e tals.. já ouvi reclamações aqui do pessoal mais administrativo, que deveria ser mais "flat" e tals..

[]s

T.·.F.·.A.·.     S+F
Fellipe Henrique P. Soares

Twitter: @fh_bash


Joelson Gai

unread,
Jul 29, 2013, 10:29:09 AM7/29/13
to django...@googlegroups.com
Você pode customizar [1]

Ou sobrescrever as classes, e ou personalizar com seus css.

[1] http://twitter.github.io/bootstrap/2.3.2/customize.html

      Joelson Gai                 
        Líder de Desenvolvimento e Infraestrutura.

     


Reply all
Reply to author
Forward
0 new messages