Question

我的输入组被卡在导航栏后面，不能把它拿出去我试图把容器放在两者之间但是那无所事事。我没有任何其他css或js，如果你也知道为什么我的导航栏不会崩溃id如果你也可以帮我那么感激它。

＆＃13;

.navbar-inverse {
    background-color: #403F3F;
    border-color: #E7E7E7;
    border-bottom-width: 7px;
}
.navbar-inverse .navbar-nav > .active a{
    background: #E7E7E7;
 }
.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
    background: #E7E7E7;
    color: #403F3F;
}
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  -webkit-filter: blur(3px);
}
a {
    font: 300 1em/1.5em 'Lato';
    font: Light 300 1em/1.5em 'Lato';
    font: Light 300 1em/1.5em 'Lato', sans-serif;
    color: white;
}
a {
    color:white;
    -o-transition:color .2s ease-out, background 2s ease-in;
    -ms-transition:color .2s ease-out, background 2s ease-in;
    -moz-transition:color .2s ease-out, background 2s ease-in;
    -webkit-transition:color .2s ease-out, background 2s ease-in;
    transition:color .2s ease-out, background 2s ease-in;
}
a:hover { 
    color:cyan;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<body>
    <!-- NAVBAR START -->
<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">
                <img alt="Brand" width="48" style="margin-top:-13px; margin-left:0px;" src="http://vps52525.vps.ovh.ca/assets/img/bar-logo.png"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav list-hover-slide">
                    <li class="active"><a href="#">&nbsp;Backpack</a>
                    </li>
                    <li><a href="#">&nbsp;Price Checker</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right list-hover-slide">
                    <li><a href="#">&nbsp;FAQ</a>
                    </li>
                    <li><a href="#">&nbsp;Partners</a>
                    </li>
                    <li><a href="#">&nbsp;Donate</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!-- NAVBAR END -->
<div id="bg">
  <img src="http://vps52525.vps.ovh.ca/assets/img/bk.png" alt="Broken i guess....">
</div>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div

＆＃13;

Answer 1

input-group位于导航栏下方的原因是因为导航栏中有一个名为navbar-fixed-top的类，它使fixed定位。因此，您只需为margin-top提供51px input-group。

那是

margin-top:51px;

我给51px的原因是因为导航栏的高度为51px。请参阅下面的图片

我强烈建议您为特定的input-group添加一个类，然后为该类指定margin-top。

输入组卡在导航栏后面

1 个答案: