Entrada de texto de largura total de inicialização no formato inline

138

Estou lutando para criar uma caixa de texto que se ajuste a toda a largura da minha área de contêiner .

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

Quando faço isso, os dois elementos do formulário estão alinhados, como eu esperava, mas não ocupam mais do que algumas colunas, na melhor das hipóteses. Passar o mouse sobre a col-md-12div no firebug mostra que ela ocupa a largura total esperada. É apenas a entrada de texto que parece não preencher. Eu até tentei adicionar um valor de largura em linha, mas isso não mudou nada. Eu sei que isso deve ser simples, apenas me sentindo muito burro agora.

Aqui está um violino: http://jsfiddle.net/52VtD/4119/embedded/result/

EDITAR:

A resposta selecionada é completa em todos os sentidos e uma ajuda maravilhosa. É o que eu acabei usando. No entanto , acho que meu problema inicial foi realmente um problema com o modelo MVC5 padrão no Visual Studio 2013. Ele continha isso no Site.css:

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

Obviamente, isso estava impedindo que a entrada de texto se expandisse adequadamente ... Aviso justo para futuros usuários de modelos do ASP.NET ...

Killnine
fonte
6
Eu só quero secundar sua descoberta sobre o problema com o modelo MVC5 padrão. Passei uma hora pesquisando esse problema e (falsamente) xingando no Bootstrap antes de encontrar uma amostra de trabalho no jsfiddle que me levou a começar novamente com uma página HTML limpa e funcionou bem. Só então eu percebi que havia um problema com o modelo VS2013 e me deparei com este post. Deus sabe por que a decisão para a largura máxima, mas mostra que você precisa ter cuidado ao usar o código de outras pessoas. Também é uma prova de voltar ao básico quando se depara com um problema como este.
precisa
2
Obrigado, também usando o modelo asp.net, mas eu já defini a largura máxima de entrada como nenhuma, mas ela ainda não aceita toda a largura, apenas se eu a definir 100% manualmente. Mas, em seguida, o botão direito pressiona e eu quero que fique na mesma linha.
Ronen Festinger
@Killnine A edição na sua pergunta resolveu minhas dores de cabeça. Na verdade, era o problema, obrigado por editar sua postagem!
Flame_Phoenix
Eu removi esse pedaço de CSS do meu arquivo site.css e ainda estou tendo o mesmo problema. Alguma ideia?
Dave317
1
Dayuuumn! Está lutando com isso e acontece que é um problema do MVC! Como sou estúpido por não inspecionar as propriedades css da caixa de texto! Obrigado por apontar isso!
Hajja

Respostas:

99

Os documentos de inicialização dizem sobre isso :

Requer larguras personalizadas As 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.

A largura padrão de 100%, como todos os elementos do formulário obtém quando eles obtiveram a classe form-control, não se aplica se você a usar form-inlineno formulário.

Você pode dar uma olhada no bootstrap.css (ou .less, o que você preferir), onde você encontrará esta parte:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Talvez você deva dar uma olhada nos grupos de entrada , pois acho que eles têm exatamente a marcação que você deseja usar (trabalhando aqui ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>
morten.c
fonte
3
Veja minha edição acima. Eu acho que o Site.css no modelo do ASP.NET pode ter me ajudado neste. No entanto, esta é uma resposta fantástica e muito útil para referência futura.
Killnine
5
grupos de entrada são o caminho a seguir. Pessoalmente, ajusto o estilo do grupo de entrada para se parecer com um formulário embutido quando não quero o botão imediatamente ao lado da entrada. Demonstração de trabalho com Bootstrap MENOS incluídos: jsfiddle.net/silb3r/gwxc5c75
cfx
1
legais! Eu sei que a pergunta é específica para o bootstrap, mas se alguém quiser soltá-lo em um site sem bootstrap (não bootstrap LESS;), extraí os estilos relevantes aqui: stackoverflow.com/a/27413796/1241736
henry
O link do Bootstrap no Fiddle está quebrado. Provavelmente está apontando para uma nova versão do Bootstrap e o Fiddle não está mais funcionando.
Chloe
@Chloe Você está certo, o violino estava usando um arquivo css de bootstrap que não existe mais. Acabei de atualizar o violino, está funcionando novamente.
morten.c
32

dê uma olhada em algo como isto:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

haxxxton
fonte
10

Conforme indicado em uma pergunta semelhante , tente remover instâncias doinput-group classe e veja se isso ajuda.

referindo-se ao bootstrap:

Controles de formulário individuais recebem automaticamente algum estilo global. Todos os elementos textuais,, e com controle .form estão definidos como width: 100%; por padrão. Coloque etiquetas e controles no grupo .form para obter o espaçamento ideal.

kurdtpage
fonte
Por morte, isso não se aplica a formulários embutidos. Assim, é necessário o grupo de entrada para forçá-lo a ser 100%
user441058
3

Tente algo como abaixo para alcançar o resultado desejado

input {
    max-width: 100%;
}
Naveed Khan
fonte
1

Com o Bootstrap> 4.1, é apenas um caso de uso das classes de utilitário flexbox. Basta ter um contêiner flexbox dentro da sua coluna e, em seguida, atribuir a todos os elementos contidos na classe "flex-fill". Assim como nos formulários embutidos, você precisará definir as margens / preenchimento dos elementos.

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>

John M
fonte