Question

这是我的代码。

sudo lsof -i tcp:6697

当窗口为完整大小时，所有链接都居中对齐。但是当我缩小窗口时，汉堡图标不会与导航栏的中心对齐。我该如何解决这个问题？

Answer 1

如果您更改了CSS：

.navbar-toggler-right {
right : 2rem

}

为：

.navbar-toggler-right {
position: absolute;
right: 18rem;
left: 18rem;
top: 3px;

}

它会居中。

Answer 2

.navbar-toggler-right {
position: absolute;
left: 50% !important;
top: 15px;
transform: translate(-50%,-50%);
}

<html>
        <head>
            <title>Personal Portfolio</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                <script src="/js/my.js"></script>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
        </head>
        <body data-spy="scroll" data-target=".navbar" data-offset="100">
            <!- Navbar-->
            <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;">
                <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navber-brand" href="#">
                    <img src="qlip.png" style="height:60px;">
                </a>
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </body>
    </html>

汉堡按钮不以导航栏为中心？

2 个答案: