4

Estou fazendo um formulário, e tenho o seguinte código:

<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Nome)
   </div>
   <div class="col-md-6">
       @Html.EditorFor(model => model.Sobrenome)
   </div>
</div>

Deste modo os campos ficam lado a lado, mas eu gostaria que ficassem, um em cima e o outro embaixo com esse mesmo tamanho de colunas, mas não consegui fazer a "quebra de linha",como faço para manter o tamanho e fazer a quebra? Estou começando a usar o bootstrap agora.

OBS: Estou usando Html helpers do Razor.

4 Respostas 4

5

Você pode fazer duas maneiras, usando .row que representa como linha ou .clearfix que quebra a linha:

No caso .row seria:

<!-- Linha 1 -->
<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Nome)
   </div>
</div>

<!-- Linha 2 -->
<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Sobrenome)
   </div>
</div>

Ou <div class="clearfix"></div>:

<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Nome)
   </div>

   <!-- Quebra linha -->
   <div class="clearfix"></div>

   <div class="col-md-6">
       @Html.EditorFor(model => model.Sobrenome)
   </div>
</div>
3

Você pode usar o .row que voce pula pra baixo sem espaçamento, mas se voce usar a classe form-group voce ja consegue obter um espaçamento entre os campos de cima e de baixo.

pode olhar um pouco mais sobre isso nesse link

você pode fazer assim:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
        <div class="col-md-6">
           <input type="text">
        </div>
    </div>
    <div class="row">
       <div class="col-md-6">
           <input type="text">
       </div>
    </div>

ou assim:

    <div class="form-group">
    	<div class="col-md-6">
    	   <input type="text">
    	</div>
    </div>
    <div class="form-group">
       <div class="col-md-6">
          <input type="text">
       </div>
    </div>

3

Alisson, recomendo estudar a estrutura da visão (Grid system) que você deve seguir ao utilizar bootstrap.

http://getbootstrap.com/css/#grid

Ao declarar seu HTML seguindo esta estrutura, suas telas serão capazes de se ajustar de acordo com o tamanho do dispositivo que está acessando.

Um exemplo simples:

Aqui, quero que para telas pequenas, meu botão ocupe toda a tela. Para telas grandes, apenas 1/4 da tela:

<div class='row'>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 1 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 2 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 3 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'> Botão 4 </button>  
    </div>
</div>

Lembrando que você nunca deve alterar a posição dos elementos de sua página utilizando estilos CSS como position:absolute e top/left fixos. Isso irá produzir um efeito distorcido quando utilizado juntamente com o bootstrap.

1

Olá, Alisson. No Bootstrap, a classe row representa uma linha, enquanto as col-md-* representam as colunas. No seu código, observe que há uma linha com duas colunas.

Se você precisa de outra linha, basta colocar cada EditorFor dentro de uma div com class row. Sugiro que você dê uma olhada na documentação do Bootstrap para entender como funciona o sistema de grid: http://getbootstrap.com/css/#grid.

Abraço.

1
  • O Adriano respondeu enquanto eu digitava. É isso aí. Commented 16/07/2015 às 13:25

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 .