Home / Questions / 4992
Accepted
julian salas
Asked: 2020-03-01 14:35:27 +0800 CST 2020-03-01 14:35:27 +0800 CST

在引导程序中调整容器大小

  • 772

我正在练习，bootstrap结果我想修改heighta的大小container-fluid，我在 中应用规则css，但我无法更改大小，这就是我所拥有的：

@charset "UTF-8";
 * {
  padding: 0;
  margin: 0;
}
/* Backgrounds */

#background-head {
  background: #000000;
}
/*Cambio de tamaño a los container*/

.container-fluid {
  max-height: 200px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Example1</title>
  <meta chartset="Utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="sheetStyle.css">
</head>

<body>
  <div class="container-fluid" id="background-head">
    <div class="row">
      <header>
        <h1>Hello</h1>
      </header>
      <!-- header -->
    </div>
  </div>
  <section>
    <article></article>
  </section>
  <footer>
  </footer>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <!-- JQUERY-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>

</html>

我不知道为什么高度规则不适用于容器。

html

3 Answers

  1. Best Answer

    问题是您使用max-height的是height.

    您max-height:200px所做的是告诉浏览器容器的最大高度应为 200 像素，但您并没有指示浏览器您想要的高度，只要小于 200 像素就可以。如果您使用height:200px，那么您是在告诉浏览器容器必须正好是 200 像素高。

    这是更改的代码，现在容器的高度为 200：

    @charset "UTF-8";
 * {
  padding: 0;
  margin: 0;
}
/* Backgrounds */

#background-head {
  background: #000000;
}
/*Cambio de tamaño a los container*/

.container-fluid {
  height: 200px;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Example1</title>
  <meta chartset="Utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="sheetStyle.css">
</head>

<body>
  <div class="container-fluid" id="background-head">
    <div class="row">
      <header>
        <h1>Hello</h1>
      </header>
      <!-- header -->
    </div>
  </div>
  <section>
    <article></article>
  </section>
  <footer>
  </footer>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <!-- JQUERY-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>

</html>

    • 6

  2. 应用！重要：

    .container-fluid{
 max-height: 200px !important;
}
    • 0

  3. 修改 a 的大小没有多大意义container-fluid，它会占据整个块，如果你想修改宽度，你必须使用container带有 a width...的类。

    至于高度，你应该只用height. 来表示尺寸。理想的情况是不要触摸类，Bootstrap因为它们通常会被重复使用，你可以添加一个div类或id例如。内容或一般性，然后给它你想要的尺寸..

    另一方面，有时它可能不允许您修改 的类Bootstrap，您通常通过增加!important您更改的值来解决它......但同样，理想的情况是不要修改 的类，Bootstrap如果您需要特定的东西，那就去做在其中一个div，并给它希望的样式...

    • 0