边距或填充引导菜单

Posted 2021-03-27

在这里，我带着一个用bootstrap制作的菜单出现了一个新问题;

问题是左边的边距或填充，菜单与徽标和其他内容不对齐;我在CSS上尝试了很多修改而没有成功！

这是http://www.deluxe-art.fr/test/index.html#页面

这是CSS

.header-top 	{ background-color:#FFF;}

navbar-header	{ z-index:1000!important;}

/*Disable bar effect of the menu in a small device*/
.navbar-collapse	{ border:0!important; box-shadow:none!important;}

.navbar-nav > li > a {color:#7a6b66!important; font-size:13px!important; margin-left:0px!important;
	-webkit-transition: color .2s ease-in;
    -moz-transition: color .1s ease-in;
    -o-transition: color .1s ease-in;
    transition: color .1s ease-in;}
	

	
.navbar-nav > li > a:hover {color:#231815!important;}
.navbar-nav > .active > a {background-color:#fff!important; color:#231815!important;}
.dropdown-menu > ul > li { background-color:#000!important;}

<header>
    
    <nav class="navbar navbar-default header-top">
    <div class="container">
    
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
        	<li class="active"><a href="index.html">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">MENU<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="#">MENU</a></li>
                <li class="divider"></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                </ul>
                
            </li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
        </ul>
    </div>
    
    </div>
    </nav>
    
</header>

答案

你可以试试

#bs-example-navbar-collapse-1.navbar-nav { margin: 0px 0px 0px -30px; }

另一答案

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 src="http://placehold.it/150x50&text=Logo" alt="">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

这是标题内的导航标记。现在应用这样的CSS ...

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}

您不必单独应用边距和填充。当你使用bootstrap框架时，这是一个糟糕的方法。

试试这个它会起作用。