Question

我在Bootstrap中创建了一个导航栏，我想让它变得更小一些。我不知怎的那样做了，但是导航栏的内容比它应该更大。我不知道如何使它更小以适应导航栏或它是否适合自动？

代码：

<nav class="navbar-default">
    <div class="container-fluid" style="padding-left:55px; height:45px;">
        <div class="navbar-header">
            <a class="navbar-brand" style="margin-bottom: 2px;"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:23px;" id="fb"></i></a>
        </div>
        <ul class="nav navbar-nav">
            <li><input type="text" class="input-sm" id="usr" style="margin-top: 9px;" placeholder="Pronadjite prijatelje"></li>
            <li id="nameprofile"><a href="#profile" style="color:white" id="nameprofilea"><img src="fb%20profile%20image.jpg" width="25px" height="25px" style="margin-right: 9px;">Ime</a></li>
            <li><a href="#profile" style="color:white">Pocetna stranica<span class="badge">2</span></a></li>
            <li id="liprijatelji"><a href="#findfriends"><i class="fa fa-users" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="findfriends"></i></a></li>
            <li id="liporuke"><a href="#poruke"><i class="fa fa-comments" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="poruke"></i></a></li>
        </ul>
    </div>
</nav>

代码中的文字不是英文，因为我不会说英语。

抱歉，如果我犯了错误。

Answer 1

好的，从引导教程中引导自己，您需要<nav class="navbar navbar-default">而不是<nav class="navbar-default">。出现意外行为的原因之一可能是因为您没有添加此类。

由于您使用的是.navbar类，因此您只需添加以下css来覆盖navbar的默认值。

.navbar{
  min-height: 50px;
  height: 50px; 
}

如果你看一下bootstrap defaul CSS，.navbar的默认值是：

.navbar {
  position: relative;
  min-height: 50px; //This line is the one  that defines the min height, which we overrid in the code above
  margin-bottom: 20px;
  border: 1px solid transparent;
}

您可能还需要为css添加max-height，因为如果您的内容大于容器，容器可能会增长。

Here is a working example

如何调整导航栏及其内容的大小？

1 个答案: