Question

如何使逆导航栏中的元素以及导航栏本身的高度较小？

<nav class="navbar navbar-inverse">
  <div >

    <ul class="nav navbar-nav mr-left" id="ulSpacing">
      <li><a href="#"><span>Live</span> Podcast</a></li>
      <li><a href="#">Kolumnisti</a></li>
      <li><form class="navbar-form " action="/action_page.php">
      <div >
        <input type="text" class="form-control" placeholder="Search" id="searchBar">
      </div>

    </form>
    </li>
    </ul>

  </div>
</nav>

Answer 1

您可能很难缩小逆导航栏的高度。您的元素之一包括搜索表单，浏览器通常在<br>标记前后包含<form></form>。让我们逐行比较您的值。

HTML：
<nav class="navbar navbar-inverse">调用两种CSS样式，表示高度在20至30像素之间。

CSS：

.navbar {
    border: 0;
    border-top: 3px solid black;
    height: 30px;  }

.navbar-inverse {
    min-height: 20px; }

HTML：CSS中有对.mr-left和#ulSpacing的引用，没有相关样式。查看您的代码，看是否有任何指示的值会影响您的反向导航栏。

<div >

<ul class="nav navbar-nav mr-left" id="ulSpacing">

CSS：

.nav {
  width: 100%;
  text-align:center;  }

.navbar-default .navbar-nav>ul>li>a {
    width: 100%;  }

.mr-left {   MISSING CLASS STYLE   }

#ulSpacing {  MISSING ID STYLE  }

HTML：向下跳到<li><form... .navbar-form和#searchBar的元素周围都有额外的间距。尝试将其调整几个像素。

  <li><form class="navbar-form " action="/action_page.php">
  <div >
    <input type="text" class="form-control" placeholder="Search" id="searchBar">
  </div>

</form>
</li>

CSS：

.navbar-form {
    margin:5px 30px 3px 5px;  }

#searchBar {
    padding: 10px 5px 10px 5px;
    height: 90%  }

还请注意：结束标记放错了位置

.navbar-default {
    background-color: white;

#bs-example-navbar-collapse-1 {
    background-color: white;
}

}

好吧，这些是我注意到的，会对您的反向导航栏产生影响。花一点时间考虑一下嵌套元素的每一层如何影响整体设计，然后进行您认为需要的调整。希望这会有所帮助。

如何将导航栏以及其中的列表项设置得更小？

1 个答案: