0

Como alterar a altura da row no Bootstrap usando porcentagem? Tentei a propriedade height tanto no CSS, quanto no HTML puro, e não deu certo.

Em poucas palavras, eu quero ter controle sobre a altura da row.

Na propriedade Height, percebi que se eu informar valor em pixel ( px ) ele funciona, porem gostaria de utilizar porcentagem ( % ), mas utilizando uma porcentagem, a propriedade não é reconhecida

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Bill Turner</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/estilo.css" rel="stylesheet" media="screen">  
    </head>   
    <style>
        .c{
            height: 50%;
            background-color:aquamarine;
        }
    </style>
    <body>
        <div class="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script> 
    </body>
</html>

inserir a descrição da imagem aqui

6
  • 2
    Poderia colocar o código que está tendo dificuldade? 26/10/2017 às 15:30
  • Geralmente o bootstrap é quem manda! Para que você volte ao domínio de seus estilos sempre coloque o !important na sua estilização. Isso quando se trata de boostrap.
    – Bsalvo
    26/10/2017 às 15:37
  • Não é o caso. Tentei usar a estilização em linha, dessa forma deveria sobrepor a qualquer estilo externo
    – ARodrigues
    26/10/2017 às 15:50
  • Em vez do height, tente aumentar o padding da .table th, td {} 26/10/2017 às 15:58
  • 1
    Possível duplicata de Alinhar altura 3 divs em uma linha - bootstrap
    – Jéf Bueno
    31/10/2017 às 18:37

2 Respostas 2

2

Primeiramente vamos entender o porque !important não funciona nesse caso.

O tamanho padrão do documento HTML e do seu corpo ( Body ) é auto, esse tamanho muda conforme os elementos são inseridos neles, mais ainda continua tendo seu tamanho automático.

console.log('Tamanho inicial: ' + $("body").height() + 'px');
console.log("Após 3 segundos ira criar um elemento.");

setTimeout(function() {
  var novoElemento = $("<div></div>").text("O tamanho do corpo mudou, confira o Log");
  $("body").append(novoElemento);
  console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  console.log("Após 6 segundos ira criar outro elemento.");
  
  setTimeout(function() {
    var novoElemento = $("<div></div>").text("O tamanho do corpo mudou novamente, confira o Log");
    $("body").append(novoElemento);
    console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  }, 6000);
  
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Para que funcione com porcentagem você deve fazer o seguinte.

  1. Definir o tamanho do documento HTML

    html {
        height: 100%;
    }
    
  2. Definir o tamanho do Body e do seletor .container

    body, .container {
        height: 100%;
    }
    
  3. Definir o tamanho do seletor .row

    .row {
        height: 50%;
    }
    

Veja funcionando

html {
  height: 100%;
}
body, .container {
  height: 100%;
}

.row {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  height: 48%;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
</div>

1

Você deve alterar o valor do line-height: eu coloquei 2.0 mas você precisa ajustar isto no css custom (custom.css eu me refiro ao seu arquivo css) e inserir o atributo !important para que subscreva o do bootstrap.

.c{
                        background-color:aquamarine;
                        line-height:2.0 !important;
        }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>

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 .