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. Примените !important:

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

  3. Нет особого смысла изменять размер a container-fluid, он создан для того, чтобы занимать весь блок, если вы хотите изменить ширину, вы должны использовать класс containerс width....

    Что касается высоты, вы должны указать размер только с помощью height.. В идеале не трогать классы, Bootstrapпотому что они обычно используются повторно, вы можете добавить один divс классом или , idнапример. содержание или общее, и к этому придайте ему размеры, которые вы хотите..

    С другой стороны, иногда это может не позволить вам изменить классы Bootstrap, вы обычно решаете это, добавляя !importantк изменяемому значению... Но опять же, в идеале не изменять классы, Bootstrapи если вам нужно что-то конкретное, сделайте это внутри одного divи придайте ему стили, которые пожелаете...

    • 0