Почему высота Навбара такая большая? - PullRequest
Новая
       19

Почему высота Навбара такая большая?

0 голосов
/ 30 декабря 2018

enter image description here

Почему высота панели навигации превышает 1 ряд?Я просто хочу, чтобы это была 1 строка.

Примечание. Это лишь малая часть кода. Может ли кто-нибудь сказать мне причину, по которой высота такая большая, чтобы я мог изменить ее в соответствии с предложением?Я не хочу слишком сильно менять структуру HTML. 

html,body {
  height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 30 декабря 2018

Удалить h-100 из class="row"

ОБЪЯСНИТЬ!

при установке h-100 на row означает height:100% -

100%

Установите высоту элемента равной 100% высоты родительского элемента (в вашем случае container-fluid), а не auto в соответствии с содержимым внутри элемента 

html,body {
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>
0 голосов
/ 30 декабря 2018

Это связано с выравниванием по умолчанию, которое является растяжением.Он отлично работает, когда оба элемента находятся в одной строке, но при переносе у вас будет 2 строки одинаковой высоты, и каждый элемент будет растянут внутри, что сделает вас первым элементом, у которого будет половина высоты контейнера:

Чтобы избежать этого, вы можете изменить выравнивание на маленьком экране, учитывая align-content-*-* (https://getbootstrap.com/docs/4.2/utilities/flex/#align-content)

. Мы делаем выравнивание равным flex-start, которое мы изменяем на stretch в точке останова md: 

html,body {
  height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100 align-content-start align-content-md-stretch">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Вот еще один вопрос с более подробной информацией, чтобы лучше понять, что происходит: дополнительное пространство при центрировании элементов с помощью flexbox

0 голосов
/ 30 декабря 2018

высота настолько велика, потому что вы добавляете h-100 в свой код, удаление h-100 показывает размер блока вашего элемента

...