导航栏菜单按钮未垂直居中移动

时间：2019-06-27 21:44:24

标签： html css twitter-bootstrap bootstrap-4 flexbox

因此，我想让我的导航菜单栏位于导航栏的中心，在其他所有屏幕尺寸中，它都是我想要的位置，除了中等大小。它只是停留在右下角，我不知道如何将其移至导航栏的右中部分。我已经尝试了所有我能想到的东西，例如边距和填充，弹性对齐，但我似乎无法弄清楚。请帮忙！

'''
<!--HTML-->
            <nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'>
                <div class='container-fluid mx-auto'>
                    <div class='navbar-brand'>
                        <a href="index.html">
                            <div class='d-none d-md-block' id='logo' alt='piano logo'></div>
                        </a>
                            <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1>
                                <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2>
                            </div>
                                    <!--Menu Button-->
                                    <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
                                        <ul id='nav nav-tabs' class='navbar-nav'>
                                            <!--Home Button-->
                                            <li class='nav-item d-block d-lg-none text-center text-lg-right'>
                                                <a class='nav-link active' id='home' href='index.html'>home</a>
                                            </li>
                                            <!--New Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a>
                                            </li>
                                            <!--Previous Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a>
                                            </li>
                                            <!--Info Dropdown-->
                                            <li class='nav-item dropdown'>
                                                <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
                                                <div class='dropdown-menu bg-info'>
                                                    <a class='dropdown-item text-center' href='#testimonials'>testimonials</a>
                                                    <a class='dropdown-item text-center' href='#schedule'>schedule</a>
                                                    <a class='dropdown-item text-center' href='#address'>address</a>
                                                </div>
                                            </ul>
                                        </div>
                                </div>
                            </div>
                        </nav>
                    </header>
'''


    '''
       * {
    box-sizing: border-box;
    text-decoration: none;
}
body {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
}

/*Navbar*/
#header-nav {
    width: 100%;
}

div.navbar-header {
    padding-bottom: 0;
}

#logo {
    background: url('../images/piano.png') no-repeat;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
}

.navbar-brand {
    margin: 0;
    padding-top: 15px;
    height: auto;
    width: auto;
    text-align: center;
}
.navbar-brand #header1 {
    text-transform: uppercase;
    font-family: bebas-neue, sans-serif;
    text-shadow: 1px 1px 1px #222;
    line-height: .75;
    margin: 0;
    padding: 0;
}
.navbar-brand #header2 {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

 a:hover,.navbar-brand a:focus {
    color: #FDECEF;
    text-decoration: none;
}

#header1 {
    color: #FDECEF;
}

/*Menu Buttons*/
.navbar-toggler-icon {
    color: #FFF;
}

#nav-list {
    margin-top: 10px;
}

#nav-list a {
    color: #F2F3F4;
    text-align: center;
}

.nav-link {
    text-transform: uppercase;
}

.dropdown-menu {
    text-transform: uppercase;
    border-radius: 8px;
}

/*Responsive Framework*/

/*Extra Large Devices*/
@media (min-width: 1200px) {

    .navbar-brand #header1 {
        font-size: 2em;
    }

    .navbar-brand #header2 {
        font-size: 1.5em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Large Devices*/
@media (min-width: 992px) and (max-width: 1199.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand #header1 {
        font-size: 1.75em;
    }

    .navbar-brand #header2 {
        font-size: 1.25em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Medium Devices*/
@media (min-width: 768px) and (max-width: 991.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand {
        width: 100%;
    }

    .navbar-brand #header1 {
        margin: 0 0 0 10px;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }

    .nav-item {
        font-size: 2em;
    }

    .dropdown-item {
        font-size: 1.5em;
    }
}

/*Small Devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }
}

/*Extra Small Devices*/
@media (max-width: 575.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 10vw;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 3.5vw;
    }
}

/*Extremely Small Devices*/
@media (max-width: 400px) {
    .navbar-brand #header1 {
        font-size: 8vw;
    }

    .navbar-brand a {
        font-size: 5vw;
    }
}
'''

1 个答案:

答案 0 :(得分：0)

当您更改屏幕尺寸并保持移动尺寸时，您的汉堡菜单从右侧的垂直居中跳转到右侧的垂直居下；

以下代码将帮助您根据问题的要求为您提供中等大小的体验； 

@media (max-width: 991.98px) and (min-width: 768px){
.navbar-brand {
    max-height: 99px;
    width: 100%;
}
}

完整的工作片段如下：

* {
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}


/*Navbar*/

#header-nav {
  width: 100%;
}

div.navbar-header {
  padding-bottom: 0;
}

#logo {
  background: url('../images/piano.png') no-repeat;
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px 0 0;
}

.navbar-brand {
  margin: 0;
  padding-top: 15px;
  height: auto;
  width: auto;
  text-align: center;
}

.navbar-brand #header1 {
  text-transform: uppercase;
  font-family: bebas-neue, sans-serif;
  text-shadow: 1px 1px 1px #222;
  line-height: .75;
  margin: 0;
  padding: 0;
}

.navbar-brand #header2 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-weight: 600;
}

a:hover,
.navbar-brand a:focus {
  color: #FDECEF;
  text-decoration: none;
}

#header1 {
  color: #FDECEF;
}


/*Menu Buttons*/

.navbar-toggler-icon {
  color: #FFF;
}

#nav-list {
  margin-top: 10px;
}

#nav-list a {
  color: #F2F3F4;
  text-align: center;
}

.nav-link {
  text-transform: uppercase;
}

.dropdown-menu {
  text-transform: uppercase;
  border-radius: 8px;
}


/*Responsive Framework*/


/*Extra Large Devices*/

@media (min-width: 1200px) {
  .navbar-brand #header1 {
    font-size: 2em;
  }
  .navbar-brand #header2 {
    font-size: 1.5em;
  }
  #navbarSupportedContent {
    margin-right: 75px;
  }
}


/*Large Devices*/

@media (min-width: 992px) and (max-width: 1199.98px) {
  #logo {
    background: url('../images/piano-medium.png') no-repeat;
    width: 150px;
    height: 150px;
  }
  .navbar-brand #header1 {
    font-size: 1.75em;
  }
  .navbar-brand #header2 {
    font-size: 1.25em;
  }
  #navbarSupportedContent {
    margin-right: 75px;
  }
}


/*Medium Devices*/

@media (min-width: 768px) and (max-width: 991.98px) {
  #logo {
    background: url('../images/piano-medium.png') no-repeat;
    width: 150px;
    height: 150px;
  }
  .navbar-brand {
    max-height: 99px;
    width: auto;
  }
  .navbar-brand #header1 {
    margin: 0 0 0 10px;
    font-size: 1.5em;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 1em;
  }
  .nav-item {
    font-size: 2em;
  }
  .dropdown-item {
    font-size: 1.5em;
  }
}


/*Small Devices*/

@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-brand #header1 {
    margin: 0;
    font-size: 1.5em;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 1em;
  }
}


/*Extra Small Devices*/

@media (max-width: 575.98px) {
  .navbar-brand #header1 {
    margin: 0;
    font-size: 10vw;
  }
  .navbar-brand #header2 {
    margin: 10px 0 0 10px;
    font-size: 3.5vw;
  }
}


/*Extremely Small Devices*/

@media (max-width: 400px) {
  .navbar-brand #header1 {
    font-size: 8vw;
  }
  .navbar-brand a {
    font-size: 5vw;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'>
  <div class='container-fluid mx-auto'>
    <div class='navbar-brand'>
      <a href="index.html">
        <div class='d-none d-md-block' id='logo' alt='piano logo'></div>
      </a>
      <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1>
      <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2>
    </div>
    <!--Menu Button-->
    <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
    <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
      <ul id='nav nav-tabs' class='navbar-nav'>
        <!--Home Button-->
        <li class='nav-item d-block d-lg-none text-center text-lg-right'>
          <a class='nav-link active' id='home' href='index.html'>home</a>
        </li>
        <!--New Students Button-->
        <li class='nav-item text-center text-lg-right'>
          <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a>
        </li>
        <!--Previous Students Button-->
        <li class='nav-item text-center text-lg-right'>
          <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a>
        </li>
        <!--Info Dropdown-->
        <li class='nav-item dropdown'>
          <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
          <div class='dropdown-menu bg-info'>
            <a class='dropdown-item text-center' href='#testimonials'>testimonials</a>
            <a class='dropdown-item text-center' href='#schedule'>schedule</a>
            <a class='dropdown-item text-center' href='#address'>address</a>
          </div>
      </ul>
    </div>
  </div>
  </div>
</nav>

相关问题
最新问题