Question

在下面的代码中，折叠的菜单在单击时会显示一个全宽的下拉菜单，如页面的那样。

            <div class="row">

                <div class="col-sm-8">

                    <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>
                    </div>
                    <!-- navbar-header -->


                    <nav class="collapse navbar-collapse navigation" id="navbar-collapse">

                        <ul class="nav navbar-nav menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="features.html">Features</a></li>
                            <li><a href="lifestyle.html">Lifestyle</a></li>
                            <li><a href="travel.html">Travel</a></li>
                            <li><a href="music.html">Music</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact Me</a></li>
                        </ul>

                    </nav>

                </div>
                <!-- navbar-collapse -->

                <div class="col-sm-4 navigation" id="social-icons">

                    <ul class="menu">

                        <a href=""><i class="fa fa-facebook"></i></a>
                        <a href=""><i class="fa fa-twitter"></i></a>
                        <a href=""><i class="fa fa-instagram"></i></a>
                        <a href=""><i class="fa fa-pinterest"></i></a>
                        <a href=""><i class="fa fa-heart"></i></a>
                        <a href=""><i class="fa fa-google-plus"></i></a>
                        <a href=""><i class="fa fa-tumblr"></i></a>

                    </ul>
                </div>
                <!-- social-icons -->
            </div>
            <!-- row -->
        </div>
        <!-- container -->
    </nav>

是否有任何方法可以减少下拉菜单的宽度，使其侧面有一些空白区域？

修改：这是我想要实现的形象。

JS小提琴：https://jsfiddle.net/9yyrnmuy/

Answer 1

还有另一种方法可以用css做这个，我刚刚添加了这些类

.navbar-inverse { background-color:transparent; }
#navbar-collapse {
  background: #222 ;
  float: left;
  width:100%;
}
.navbar-inverse::after {
  background: #222 none repeat scroll 0 0;
  content: "";
  height: 50px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
 }
 .navbar-inverse { background-color:transparent; border-color:transparent; }

使用代码段检查

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
/*custom for submenu here*/
 
#navigation .container {
    height: 48px;
}

.navbar-inverse .navbar-nav>li {
    margin: 0;
    margin-right: 22px;
}

#social-icons {
    line-height: 48px;
    display: inline-block;
}

.fa {
    color: #e6c55d;
    margin-right: 11px;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}

.fa:hover {
    color: #fff;
}

.navbar-toggle {
    background: #232123;
    float: left;
    border: none;
}

#social-icons {
    position: absolute;
    top: 0;
    right: 15px;
}

.navbar-inverse .navbar-nav>li>a {
    padding-top: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
    line-height: 48px;
    text-transform: uppercase;
    display: inline-block;
}


@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 0;
        margin-bottom: 3px;
        
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        margin: -10px;
        margin-left: 20px;
    }
    .navbar-text {
        float: none;
    }

    
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
	.navbar-inverse { background-color:transparent; border-color:transparent; }
#navbar-collapse {
    background: #222 ;
    float: left;
    width:100%;
}
   .navbar-inverse {
   border-color:transperant;
 }
.navbar-inverse::after {
    background: #222 none repeat scroll 0 0;
    content: "";
    height: 50px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
}

</style>
<nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">

                <div class="row">

                    <div class="col-sm-8">

                        <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>
                        </div>
                        <!-- navbar-header -->


                        <nav class="collapse navbar-collapse navigation" id="navbar-collapse">

                            <ul class="nav navbar-nav menu">
                                <li><a href="/">Home</a></li>
                                <li><a href="features.html">Features</a></li>
                                <li><a href="lifestyle.html">Lifestyle</a></li>
                                <li><a href="travel.html">Travel</a></li>
                                <li><a href="music.html">Music</a></li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="contact.html">Contact Me</a></li>
                            </ul>

                        </nav>

                    </div>
                    <!-- navbar-collapse -->

                    <div class="col-sm-4 navigation" id="social-icons">

                        <ul class="menu">

                            <a href=""><i class="fa fa-facebook"></i></a>
                            <a href=""><i class="fa fa-twitter"></i></a>
                            <a href=""><i class="fa fa-instagram"></i></a>
                            <a href=""><i class="fa fa-pinterest"></i></a>
                            <a href=""><i class="fa fa-heart"></i></a>
                            <a href=""><i class="fa fa-google-plus"></i></a>
                            <a href=""><i class="fa fa-tumblr"></i></a>

                        </ul>
                    </div>
                    <!-- social-icons -->
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </nav>
<!--/.nav-collapse --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 2

您可以向nav元素添加col-class以控制下拉列表的宽度

  <nav class="collapse navbar-collapse navigation col-xs-6" id="navbar-collapse">

                    <ul class="nav navbar-nav menu">
                        <li><a href="/">Home</a></li>
                        <li><a href="features.html">Features</a></li>
                        <li><a href="lifestyle.html">Lifestyle</a></li>
                        <li><a href="travel.html">Travel</a></li>
                        <li><a href="music.html">Music</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact Me</a></li>
                    </ul>

 </nav>
 <div class = "col-xs-3">  SOME SIDE CONTENT </div>

Answer 3

您可以通过width向.navbar-collapse.in此css

提供此功能

https://jsfiddle.net/9yyrnmuy/4/

Answer 4

如果不改变html结构，请添加此css

.container {
  padding: 0;
}

.navbar-header {
  padding-left: 15px;
  padding-right: 15px;
}

.navbar-collapse {
  background: #fff;
  padding: 0 30px;
  border: none;
}

.navbar-collapse ul {
  background: #000;
}

.navbar-collapse {
  margin: 0;
}

减少折叠菜单的宽度

4 个答案: