Question

这里我有一个带右对齐徽标的引导导航栏和带有社交媒体图标的左对齐链接。这是html：

<!--=========NAVBAR=========-->
            <header>
                <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="container-fluid">

                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" 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 href="#" class="navbar-brand"><img src="assets/img/logo.png" alt=""></a>
                          </div>

                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a class="nav-link" href="">About</a></li>
                                <li><a class="nav-link" href="">Services</a></li>
                                <li><a class="nav-link" href="">Portfolio</a></li>
                                <li><a class="nav-link" href="">Contact</a></li>
                                <li><a class="nav-link" href="">Blog</a></li>
                                <li><a href="#" class="fa fa-facebook"></a></li>
                                <li><a href="#" class="fa fa-instagram"></a></li>
                                <li><a href="#" class="fa fa-linkedin"></a></li>
                            </ul>
                        </div>

                    </div>
                </nav>
            </header>

我已经改变了高度，并且我使用以下css垂直居中项目：

.navbar {
    min-height: 80px;
    background-color: transparent;
    border:none;
    transition: 1s all ease;
}

.navbar-brand{
    min-height: 80px;
    padding: 18.5px 0 18.5px 20px;
}

.navbar .nav > li > a.nav-link {
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    padding: 26.5px 20px;
    line-height: 27px;
    font-size: 18px;
    color:white;
    letter-spacing: 3px;
}

.navbar .navbar-right > li > a.fa{
    padding: 26.5px 0 26.5px 20px;
    line-height: 27px;    
    font-size: 27px;
    color:white;
}

.navbar .nav > li:nth-child(5){
    border-right: 1px solid rgba(255,255,255,0.4);
    padding-right:15px;
}

.navbar .nav > li:nth-child(6){
    padding-left:15px;
}

.navbar .nav > li:nth-child(8){
    padding-right:20px;
}

导航栏的高度为80px，标签的行高为27像素。所以80-27 = 53px剩余，这意味着标签有53/2 = 26.5px填充顶部和26.5px填充到底部。这是我如何垂直居中。与徽标图像相同的逻辑。图像是43px高，这意味着37剩余，所以18.5填充顶部和18.5填充底部。问题是我的逻辑是对的吗？我有任何不必要的CSS规则吗？我想添加一个效果，当我向下滚动导航栏变短但我有许多元素填充等所以我不能添加动态类与javascript我必须更改3个不同元素中的所有这些填充。那么有没有更快的方法呢？以下是它的外观：

Answer 1

只需使用另一个代表.navbar的替代状态的类。因为.navbar IS .navbar-brand，.navbar .nav > li > a.nav-link和.navbar .navbar-right > li > a.fa元素的共同祖先。

然后我们可以使用JavaScript切换修饰符类。这是一个有效的例子。使用.squished修饰符类

<html>
  <head>


    <title>Our Simple Solution</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <style type="text/css" media="screen">

        .navbar {
            min-height: 80px;
            background-color: red; /* changed bg for better visual */
            border: none;
            /* transition: 1s all ease; */
        }

        .navbar-brand {
            min-height: 80px;
            padding: 18.5px 0 18.5px 20px;
        }

        .navbar .nav > li > a.nav-link {
            font-family: "Dosis", sans-serif;
            text-transform: uppercase;
            font-weight: 600;
            padding: 26.5px 20px;
            line-height: 27px;
            font-size: 18px;
            color: white;
            letter-spacing: 3px;
        }

        .navbar .navbar-right > li > a.fa {
            padding: 26.5px 0 26.5px 20px;
            line-height: 27px;
            font-size: 27px;
            color: white;
        }

        .navbar .nav > li:nth-child(5) {
            border-right: 1px solid rgba(255, 255, 255, 0.4);
            padding-right: 15px;
        }

        .navbar .nav > li:nth-child(6) {
            padding-left: 15px;
        }

        .navbar .nav > li:nth-child(8) {
            padding-right: 20px;
        }


        /* ADDED CSS RULES */
        .navbar,
        .navbar-brand,
        .navbar .nav > li > a.nav-link,
        .navbar .navbar-right > li > a.fa {
            transition: 1s all ease;
        }


        .navbar.squished {
            min-height: 60px; /* example unit */
        }

        .navbar.squished .navbar-brand {
            min-height: 60px; /* example unit */
            padding: 8.5px 0 8.5px 20px;
        }

        .navbar.squished .nav > li > a.nav-link {
            padding: 16.5px 20px;
        }

        .navbar.squished .navbar-right > li > a.fa {
            padding: 16.5px 0 16.5px 20px;
        }
    </style>

  </head>

  <body>
    <!-- ORIGINAL MARKUP --> 
    <header>
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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 href="#" class="navbar-brand"><img src="assets/img/logo.png" alt="image could not be loaded"><!-- added [alt] attribute --></a>
          </div>

          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="nav-link" href="">About</a></li>
                <li><a class="nav-link" href="">Services</a></li>
                <li><a class="nav-link" href="">Portfolio</a></li>
                <li><a class="nav-link" href="">Contact</a></li>
                <li><a class="nav-link" href="">Blog</a></li>
                <li>
                    <a href="#" class="fa fa-facebook"></a>
                </li>
                <li>
                    <a href="#" class="fa fa-instagram"></a>
                </li>
                <li>
                    <a href="#" class="fa fa-linkedin"></a>
                </li>
            </ul>
          </div>

        </div>
      </nav>
    </header>
    <!--// ORIGINAL MARKUP --> 

    <!-- SOME SCROLLABLE CONTENT --> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>

    <p>Lorem ipsum dolor sit amet conpsectetur adipisicing elit. Recusandae ea, saepe sapiente quidem debitis est id accusantium ipsam officiis. Beatae commodi odit ab optio quas, incidunt architecto natus officiis quis!</p>
    <!--// SOME SCROLLABLE CONTENT --> 



    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        (function () {
            var nav = document.querySelector('.navbar');
            var body = document.body;
            document.onscroll = function(event) {
                //console.log(body.scrollTop);

                if (body.scrollTop > nav.offsetHeight) { // nav current height
                    nav.classList.add('squished');
                }
                else {
                    nav.classList.remove('squished');
                }

            };
        })();


        /* OR JQUERY EQUIVALENT */

        /*$(document).ready(function () {
            $(document).scroll(function(event) {
                var $nav = $('.navbar').eq(0);
                var $body = $(this.body);
                //console.log(body.scrollTop);

                if ($body.scrollTop() > $nav.height()) {
                    $nav.addClass('squished');
                }
                else {
                     $nav.removeClass('squished');
                }

            });
        })*/
    </script>
  </body>  
</html>

使用css更改引导程序导航栏默认尺寸

1 个答案: