Question

一个奇怪的问题，我似乎找不到在线的答案，所以我会看看这里是否有其他人遇到过类似的问题。

我有一个相对较高的bootstrap 3导航栏（高110px），带有渐变背景。

我想在导航栏的底部添加一个1px的边框，以便它更好地融入我的页面，但出于某种原因，当我这样做时，我会有一个小的差距（似乎是大约1px）通过导航栏查看页面后面的内容。

我试图在codepen上复制这个问题，但无论出于何种原因，当我在那里进行时问题都没有发生，所以我在下面提供了截图。

不确定是否可以制作但导航栏底部与1px边框之间存在间隙。我将边框设为橙色，以便更容易看到。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data- 
     toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
       controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#products">Products</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div><!--/.nav-collapse -->
  </div>
   </nav>

<div class='input-group date' id='datetimepicker1'>
    <input asp-for="Observation.ObservationDateTime" type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

如果有人对如何删除此间隙有任何有用的提示，我们将不胜感激！

导航栏边界之间略微间隙

0 个答案: