Question

我决定将我的网站的bootstrap版本上传到bootstrap 4.更新后，我遇到了很多问题，因为bootstrap在新版本中发生了很大变化，我基本上不得不重写大部分代码我的网站。我还必须重写导航栏，因为他们添加了许多新的酷类。

导航栏工作正常，但有些问题与高度有关。我设法改变导航栏的高度，但子元素使用导航栏的全高，我不喜欢它。例如，我有这个代码：

<nav class="navbar navbar-toggleable-sm bg-custom">
          <div class="container no gutters">
            <button class="navbar-toggler" data-toggle="collapse" data-target="#nav">
              <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="navbar-nav mr-auto">
                <a class="nav-item nav-link active" href="#">Link1</a>
                <a class="nav-item nav-link" href="#">Link1</a>
                <a class="nav-item nav-link" href="#">Link1</a>
                <a class="nav-item nav-link" href="#">Link1</a>
              </ul>
              <ul class="navbar-nav social list-inline">
                <a class="butn py-1" href="#">Link1</a>
                <div class="align justify-content-center">
                  <a class="list-inline-item" href="#about"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
                  <a class="list-inline-item" href="#services"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
                  <a class="list-inline-item" href="#contact"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
              </ul>
            </div>
          </div>
        </nav>

正如你所看到的，我在同一条线上使用2个不同的导航，我喜欢第一个，但是第二个也有一个按钮，它占据了导航栏的整个高度我似乎无法改变它。

此处的实时版本：http://tanely.anweb.ee

我可能错过了文档中的内容，但似乎flexbox不会让我像我想的那样改变高度。我希望按钮不会使用父高度，相反，它应该使用元素的高度，在这种情况下，它的元素a与一个类的butn。

我尝试设置不同的高度，更改填充，边距，试图弄乱flexbox属性（对于父母也是如此）等，但是，它们都没有帮助我。

我想也许你们中的一些人可以检查一下并教育我一点。

Answer 1

flex父级中弹性项目的默认高度为＆＃34; stretch，＆＃34;这就是你所看到的。但是你的HTML无效。只有li可以是ul的直接子项。如果您将a包裹在li中，那将修复一些无效的HTML，然后li将＆＃34;延伸＆＃34;它内部的a将是它的自然高度。

<ul class="navbar-nav social list-inline">
  <li><a class="butn py-1" href="#">Link1</a></li>
  ...

无法在引导导航栏

1 个答案: