Larguras de entrada no Bootstrap 3

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>

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.

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.

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

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

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

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/

<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

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

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.

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.

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.

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

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

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.

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.

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

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>

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> 

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>