Question

我尝试在页面顶部修复菜单栏，没有搜索框和社交图标，但没有运气。我在我的最高嵌套元素中使用了navbar-fixed-top，但它似乎无法工作。

这是我的BOOTPLY ...... BOOTPLY

/* CSS used here will be applied after bootstrap.css */

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
}

.menu-container {
    background-color:red;
    min-height:20px;
	position:relative
}

.navbar-nav a:hover {
    color:#000
}

.navbar-nav a:link {
    font-size:12px;
    font-family:'century schoolbook';
    color:#000;
	text-decoration:overline
}

.brand-name a {
	text-decoration:none
}

.brand-name img {
	max-width:137px;
	padding:2px;
	/*position:absolute;*/
	left:0px;
}

ul {
    list-style-type:none;
}

.navbar-form input,.form-inline input {
    width:auto
}

#nav.affix {
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}

#sidebar.affix-top {
    position:static
}

#sidebar.affix {
    position:fixed;
    top:80px
}

.navbar-default .navbar-nav > li > a {
    color:#000;
    font-family:'LuzSans-Book';
    font-size:14px;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color:#A10000;
    color:#000
}

.navbar-default .navbar-nav > .active > a {
    background-color:#000;
}

.navbar-custom-social {
    height:15px;
    float:right;
    clear:none;
    margin-right:25px
}

.navbar-fixed-top {
	padding-top:0
}

.search p {
    background-color:blue;
    border:4px dotted black;
    width:20%
  }
  
.social p {
      background-color:orange;
    border:4px dotted green;
  width:20%
  }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header id="nav navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-static">
                      
                        <div class="clearfix menu-container">
                            <div class="pull-right clearfix toggle_btn_wrap">
                                <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
                            </div>
                            <div class="pull-left brand-name">
                                <a href="#"><img alt="BRANDNAME" src=""></a>
                            </div>
                            <div class="clearfix prevent-float"></div>
                          <div class="item">item-1</div>
                          <div class="item">item-2</div>
                          <div class="item">item-3</div>
                          
                            </div>
							 </div>
                        <div class="clearfix search_and_social">
                            <div class="search">
                              <p>SEARCH BOX</p>
                            </div>
                            <div class="social">
                              <p>SOCIAL-ICONS</p>
                            </div>
                        </div>
                    </div>
                </div>
				</div>
            </header>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>

Answer 1

请试试这个，

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header id="nav navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-fixed-top">

                        <div class="clearfix menu-container">
                            <div class="pull-right clearfix toggle_btn_wrap">
                                <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
                            </div>
                            <div class="pull-left brand-name">
                                <a href="#"><img alt="BRANDNAME" src=""></a>
                            </div>
                            <div class="clearfix prevent-float"></div>
                          <div class="item">item-1</div>
                          <div class="item">item-2</div>
                          <div class="item">item-3</div>

                            </div>
                             </div>
                        <div class="clearfix search_and_social">
                            <div class="search">
                              <p>SEARCH BOX</p>
                            </div>
                            <div class="social">
                              <p>SOCIAL-ICONS</p>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </header>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>
<div class="content">CONTENT</div>
<div class="content">CONTENT2</div>
<div class="content">CONTENT3</div>
<div class="content">CONTENT4</div>
<div class="content">CONTENT5</div>
<div class="content">CONTENT6</div>

Answer 2

您的标头标记将其类作为ID。

<header id="navbar navbar-fixed-top">

应该是

<header class="navbar navbar-fixed-top">

您可能会发现添加navbar-default会更好地显示它。

<header class="navbar navbar-default navbar-fixed-top">

请参阅http://www.bootply.com/JevhIDvg5G

修复页面顶部的菜单栏

2 个答案: