Larguras de entrada no Bootstrap 3


154

Atualize novamente: estou encerrando esta pergunta selecionando a resposta principal para impedir que as pessoas adicionem respostas sem realmente entender a pergunta. Na realidade, não há como fazê-lo com a funcionalidade de compilação sem usar grade ou adicionar CSS adicional. As grades não funcionam bem se você estiver lidando com help-blockelementos que precisam ir além de uma entrada curta, por exemplo, mas eles são incorporados. Se esse é um problema, recomendo o uso de classes css extras, que podem ser encontradas na discussão do BS3 aqui . Agora que o BS4 saiu, é possível usar os estilos de dimensionamento incluídos para gerenciar isso, para que isso não seja relevante por muito mais tempo. Obrigado a todos por uma boa entrada nesta popular questão SO.

Atualização: Esta questão permanece em aberto porque se trata da funcionalidade incorporada no BS para gerenciar a largura de entrada sem recorrer à grade (às vezes elas precisam ser gerenciadas independentemente). Eu já uso classes personalizadas para gerenciar isso, portanto, este não é um tutorial sobre CSS básico. A tarefa está na lista de discussão dos recursos do BS e ainda não foi abordada.

Pergunta original: Alguém descobriu uma maneira de gerenciar a largura de entrada no BS 3? Atualmente, estou usando algumas classes personalizadas para adicionar essa funcionalidade, mas posso ter perdido algumas opções não documentadas.

Os documentos atuais dizem usar .col-lg-x, mas isso claramente não funciona, pois só pode ser aplicado à div do contêiner, que causa todos os tipos de problemas de layout / flutuação.

Aqui está um violino. Estranho é que no violino eu não consigo nem redimensionar o grupo de forma.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

5
Por que usar o bootstrap para gerenciar essas larguras? Não parece ser particularmente bom nisso e introduz complexidade.
Eamon Nerbonne

1
Por que usar o bootstrap para isso, @Eamon? O design responsivo e o alinhamento com o restante dos elementos que o bootstrap está manipulando vêm à mente. E de qualquer maneira, o ponto inteiro da questão é como fazê-lo sem introduzir complexidade.
Ctb

@ctb: CSS simples lida com esse tipo de problema; não há necessidade da complexidade adicional do bootstrap.
Eamon Nerbonne

1
então espere, essa pergunta foi respondida? 38 upvotes é muito.
rook

1
@rook - a resposta é que não, não há funcionalidade de builld-in, embora esteja na lista de discussão deles. No entanto, como alternativas, existem algumas fornecidas aqui até / se a BS realmente adicionar isso.
13Ribeirão

Respostas:


95

O que você quer fazer é certamente alcançável.

O que você deseja é agrupar cada 'grupo' em uma linha, não o formulário inteiro com apenas uma linha. Aqui:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

O novo jsfiddle que fiz: NOVO jsfiddle

Observe que no novo violino também adicionei 'col-xs-5' para que você possa vê-lo também em telas menores - removê-las não faz diferença. Mas lembre-se de que em suas aulas originais, você está usando apenas 'col-lg-1'. Isso significa que, se a largura da tela for menor que o tamanho da consulta de mídia 'lg', o comportamento padrão do bloco será usado. Basicamente, aplicando apenas 'col-lg-1', a lógica que você está empregando é:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Consulte o sistema de grade do Bootstrap 3 para obter mais informações. Espero ter sido claro, caso contrário, deixe-me saber e eu elaboraria.


sim, foi o que eu coloquei no meu comentário para @Skelly - há uma questão em aberto sobre isso e eles resolverão isso assim que as coisas se acalmarem. A adição de linhas não é o que eu estou procurando, devido à marcação extra que é totalmente desnecessária se eles fizerem as classes apropriadas - e foi o que eu fiz. Eu criei .input1-12 com largura de porcentagem e eu só aplicar isso para a entrada - funciona muito bem
cyberwombat

7
Não li muito sobre este post, mas ... "Use as classes de grade predefinidas do Bootstrap para alinhar rótulos e grupos de controles de formulário em um layout horizontal, adicionando .form-horizontal ao formulário. Fazer isso altera .form-groups para se comportar como linhas de grade, então não há necessidade de .row ".
dtc 9/12/13

@ dtc Isso não ajuda muito em larguras de entrada?
Jacques

@shadowf E se eu quiser fazer uma entrada menor do que sua etiqueta? Eu tenho que colocar uma entrada em outro par de divs?
PowerGamer

1
obrigado que funciona para mim. A propósito, é domingo às 22h para mim :-) como eu estou do outro lado do globo.
Ananda

70

No Bootstrap 3

Você pode simplesmente criar um estilo personalizado:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Em seguida, adicione-o para formar controles da seguinte maneira:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

Dessa forma, você não precisa colocar marcações extras para o layout em seu HTML.


15
Isso vence de longe as respostas. É limpo, reutilizável e simplesmente funciona. De fato, ele deve ser colocado no bootstrap por padrão, pois esse é um incômodo muito comum. Muito raramente você deseja formulários de bloco puros.
precisa saber é o seguinte

Eu tentei esta solução, mas não funcionou para mim. Como eu queria limitar a largura do meu campo, usei 'width: 200px' no estilo personalizado, mas isso não mudou a largura. Somente quando defini 'max-width: 200px' obtive o resultado correto.
paulo62

Quando eu uso isso, a largura não substitui a largura automática da classe de controle de formulário.
johnny

1
Concordo com os comentários aqui - na verdade, eu tentei isso antes de procurar aqui, não parece substituir os padrões ... sem saber por que alguns estilos personalizados fazem e outros não.
Wil

1
Aqui está um violino demonstrando como isso é: jsfiddle.net/yd1ukk10
brandones

25

ASP.net MVC vá para Content- Site.css e remova ou comente esta linha:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Se você olhar para o violino, verá que o OP deseja tornar os campos menores, não maiores. O maior problema aqui é que o site dele não faz referência ao site.css.
Bmize729

Eu não sabia que a regra css estava lá e estava me deixando louco porque minhas larguras especificadas pareciam estar sendo ignoradas. Obrigado.
Michael S. Miller

10

Eu acho que você precisa agrupar as entradas dentro de um col-lg-4e, em seguida, dentro do form-groupe tudo fica contido em um form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Demonstração no Bootply - http://bootply.com/78156

EDIT: A partir do Bootstrap 3 documentos ..

Entradas, seleções e áreas de texto têm 100% de largura por padrão no Bootstrap. Para usar o formulário embutido, você precisará definir uma largura nos controles de formulário usados ​​dentro.

Portanto, outra opção é definir uma largura específica usando CSS:

.form-control {
    width:100px;
}

Ou, aplique o col-sm-*ao `form-group '.


6
É necessário adicionar a classe de linha ao grupo de formulários. Fiz uma discussão com a equipe do Bootstrap e eles adicionaram a possibilidade de inserir um controle de largura específico à sua lista de planejamento. Enquanto isso, temos que usar grades completas. Se você seguir em frente e adicionar linha à classe de grupo de formulários e remover a classe horizontal, marcarei esta resposta. Aqui está o trabalho violino jsfiddle.net/tdUtX/2 eo planejamento github.com/twbs/bootstrap/issues/9397
cyberwombat

1
+ @ Yashua - +1 ótimo exemplo. Isso também funciona com a classe do grupo de entrada, que estava me causando problemas.
David Robbins

10

Os documentos atuais dizem usar .col-xs-x, sem lg. Então eu toco violino e parece funcionar:

http://jsfiddle.net/tX3ae/225/

para manter o layout, talvez você possa alterar onde coloca a classe "row" como esta:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/


1
não funciona para pequenos dispositivos como o campo de entrada fica muito pequena
FranBran

9
<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Inclua a classe no form.group para restringir as entradas


8
Isso realmente não funciona. Faz com que cada elemento subsequente flutue próximo a este. Você precisa adicionar uma div com linha de classe em todos os grupos de formulários, o que é ridículo.
precisa saber é o seguinte

6

Se você estiver usando o modelo Master.Site no Visual Studio 15, o projeto base terá "Site.css" que SUBSTITUI a largura dos campos de controle de formulário.

Não foi possível obter a largura das minhas caixas de texto com mais de 300 pixels de largura. Eu tentei tudo e nada funcionou. Descobri que há uma configuração no Site.css que estava causando o problema.

Livre-se disso e você pode obter controle sobre as larguras dos seus campos.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

obrigado cara, quatro anos depois isso me salvou
Rich

4

Sei que esse é um thread antigo, mas tive o mesmo problema com um formulário embutido e nenhuma das opções acima resolveu o problema. Então eu corrigi meu formulário embutido da seguinte forma: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

Essa foi a minha solução. Um pouco hacker, mas fez o trabalho para um formulário embutido.


4

Você pode adicionar o atributo style ou adicionar uma definição para a tag de entrada em um arquivo css.

Opção 1: adicionando o atributo style

<input type="text" class="form-control" id="ex1" style="width: 100px;">


Opção 2: definição em css

input{
  width: 100px
}

Você pode alterar os 100 pixels no modo automático

Espero poder ajudar.


3

No Bootstrap 3

Todos os elementos textuais <input>, <textarea> e <select> com .form-control estão configurados para width: 100%; por padrão.

http://getbootstrap.com/css/#forms-example

Parece que, em alguns casos, precisamos definir manualmente a largura máxima que queremos para as entradas.

De qualquer forma, seu exemplo funciona. Basta verificar com uma tela grande, para que você possa ver o nome e os campos de e-mail que estão recebendo o 2/12 do (col-lg-1 + col-lg-1 e você tem 12 colunas). Mas se você tiver uma tela menor (apenas redimensione seu navegador), as entradas serão expandidas até o final da linha.


3

Você não precisa desistir de css simples :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

1

Se você deseja reduzir ou aumentar a largura dos elementos de entrada do Bootstrap ao seu gosto, eu usaria max-widthno CSS.

Aqui está um exemplo muito simples que eu criei:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Eu configurei a largura máxima do formulário como 500px. Dessa forma, você não precisará usar nenhum sistema de grade do Bootstrap e também manterá o formulário responsivo.


0

Também estou lutando com o mesmo problema, e esta é a minha solução.

Fonte HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Cubra o código de entrada com outra classe div

Fonte CSS

.input_width{
   width: 450px;
}

forneça qualquer configuração de largura ou margem na classe div coberta.

A largura de entrada do Bootstrap é sempre padrão como 100%, portanto, a largura segue a largura coberta.

Esta não é a melhor maneira, mas a solução mais fácil e única que resolvi o problema.

Espero que isso tenha ajudado.


0

Não sei por que todo mundo parece ignorar o arquivo site.css na pasta Conteúdo. Veja a linha 22 deste arquivo e você verá as configurações da entrada a ser controlada. Parece que seu site não está fazendo referência a esta folha de estilos.

Eu adicionei isso:

input, select, textarea { max-width: 280px;}

para o seu violino e funciona muito bem.

Você nunca deve atualizar o bootstrap.css ou o bootstrap.min.css. Isso fará com que você falhe quando a inicialização for atualizada. É por isso que o arquivo site.css está incluído. É aqui que você pode fazer alterações no site que ainda fornecerão o design responsivo que você está procurando.

Aqui está o violino com ele trabalhando


0

Adicione e defina termos para o style=""campo de entrada, essa é a maneira mais fácil de fazer isso: Exemplo:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

0

O Bootstrap usa a classe 'entrada de formulário' para controlar os atributos de 'campos de entrada'. Simplesmente, adicione sua própria classe 'entrada de formulário' com a largura, borda, tamanho do texto, etc. desejados no seu arquivo css ou na seção principal.

(ou então, adicione diretamente o código embutido size = '5' nos atributos de entrada na seção body.)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

0

Bootstrap 3 Consegui um bom layout de formulário responsivo usando o seguinte:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.