Cambiar el tamaño de un container en bootstrap

publicado por: Anonymous

Estoy practicando con bootstrap y resulta que deseo modificar el height de un container-fluid, aplico las reglas en css, pero no puedo cambiar el tamaño, esto es lo que llevo:

_x000D_

_x000D_

@charset "UTF-8";_x000D_
 * {_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
/* Backgrounds */_x000D_
_x000D_
#background-head {_x000D_
  background: #000000;_x000D_
}_x000D_
/*Cambio de tamaño a los container*/_x000D_
_x000D_
.container-fluid {_x000D_
  max-height: 200px;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <title>Example1</title>_x000D_
  <meta chartset="Utf-8">_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
  <!-- Latest compiled and minified CSS -->_x000D_
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">_x000D_
  <link rel="stylesheet" type="text/css" href="sheetStyle.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="container-fluid" id="background-head">_x000D_
    <div class="row">_x000D_
      <header>_x000D_
        <h1>Hello</h1>_x000D_
      </header>_x000D_
      <!-- header -->_x000D_
    </div>_x000D_
  </div>_x000D_
  <section>_x000D_
    <article></article>_x000D_
  </section>_x000D_
  <footer>_x000D_
  </footer>_x000D_
  <!-- Latest compiled and minified JavaScript -->_x000D_
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>_x000D_
  <!-- JQUERY-->_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

No se porque no se aplica la regla de altura al container.

solución

El problema es que estás utilizando max-height en lugar de height.

Con max-height:200px lo que haces es decirle al navegador que el contenedor debe tener una altura máxima de 200px, pero no le das instrucciones sobre la altura que quieres, que puede ser cualquier cosa mientras que sea menos de 200 pixels. Si usas height:200px entonces le estás diciendo al navegador que el contenedor debe tener una altura exacta de 200 pixels.

Aquí tienes el código con el cambio, ahora el contenedor sí tiene una altura de 200:

_x000D_

_x000D_

@charset "UTF-8";_x000D_
 * {_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
/* Backgrounds */_x000D_
_x000D_
#background-head {_x000D_
  background: #000000;_x000D_
}_x000D_
/*Cambio de tamaño a los container*/_x000D_
_x000D_
.container-fluid {_x000D_
  height: 200px;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <title>Example1</title>_x000D_
  <meta chartset="Utf-8">_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
  <!-- Latest compiled and minified CSS -->_x000D_
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">_x000D_
  <link rel="stylesheet" type="text/css" href="sheetStyle.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="container-fluid" id="background-head">_x000D_
    <div class="row">_x000D_
      <header>_x000D_
        <h1>Hello</h1>_x000D_
      </header>_x000D_
      <!-- header -->_x000D_
    </div>_x000D_
  </div>_x000D_
  <section>_x000D_
    <article></article>_x000D_
  </section>_x000D_
  <footer>_x000D_
  </footer>_x000D_
  <!-- Latest compiled and minified JavaScript -->_x000D_
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>_x000D_
  <!-- JQUERY-->_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *