Question

CODE

＆＃13;

<style type="text/css">
            .nav>li>a:hover, .nav>li>a:focus .navbar-header>a:hover, .navbar-header>a:focus {
                background-color: #7F613F;
            }
         a   .icon-color {
                color: #282828;
            }
        </style>

＆＃13;

	<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="navbar navbar-fixed-top" style="background-color: #b39369">
        <div class="container-fluid">
    	<div class="nav navbar-nav navbar-header">
    		<li><a href="#"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
    		<li><a href="#"><i class="glyphicon glyphicon-list-alt icon-color"></i></a></li>
    		<li><a href="#"><i class="glyphicon glyphicon-user icon-color"></i></a></li>
    	</div>
    </div>

    </body>

＆＃13;

正如您可以看到jsfiddle，随着浏览器的缩小，上面堆放了三个图标，好像有3个导航栏。

但我想只保留一个导航栏，并显示这3个图标。

如何修改此打桩？

Bootstrap3，我想让它不被堆积

0 个答案: